Tasarım Kodlama

CSS ile DIVler Arası Boşluk Bırakma

Bu yazıda divler arasında boşluk bırakmak için çeşitli yöntemler göstereceğim. Çeşitli CSS durumlarında bir çok şekilde boşluk bırakılır. Yine bu yazıda bunlarla ilgili de bilgiler bulacaksınız. Ayrıca yine bu yazıda CSS flex ile birlikte kullanıma giren gap(boşluk) özelliğini de kullanmayı göstereceğim.

CSS kullanarak etiketler arasında boşluk bırakmak için margin özelliği kullanılır.

Margin özelliği üç şekilde kullanılabilir.

  • margin: heryerden;
  • margin: üst/alt sağ/sol;
  • margin: üst sağ alt sol;

Aşağıdaki gibi bir HTML dosyasına sahip olduğumuzu düşünelim.

Genel olarak da CSS kodları şu şekilde yazdıyoruz.

Aşağıdaki örnekleri yukarıdaki HTML ve CSS kodlarını kullanarak yeniden kodlayalım.

Örnek 1:

Kutuların etrafında boşluk bırakmak için ise .kutu div’ini aşağıdaki gibi yeniden biçimlendirelim.

Ekran çıktısı şu şekilde olacaktır.

CSS Divler Arasında Boşluk Bırakma
CSS Divler Arasında Boşluk Bırakma

Örnek 2: float özelliği verilmiş DIVler arasında boşluk bırakma.

Örnekte nesnenin her yerinde 50px boşluk olduğu için iki nesne arasında 50+50 olacak şekilde 100px boşluk oluşacaktır. Her nesnenin kendine ait 50pxlik boşluğu olacaktır.

CSS Divler Arasında Boşluk Bırakma

Örnek 3: float özelliği artık yerini flex nesnelerine bırakmaya başladı. Aşağıdaki örnekte .sayfa divi flex yapılmıştır. .kutu divleri arasında boşluk bırakma içinde gap özelliği ile nesneler arasında boşluk bırakılmıştır.

CSS Divler Arasında Boşluk Bırakma
CSS Divler Arasında Boşluk Bırakma

Yorum yap