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.
1 2 3 4 5 6 7 8 9 10 11 12 | <body> <div class="sayfa"> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> </div> </body> |
Genel olarak da CSS kodları şu şekilde yazdıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <style> body{ margin:0; } .sayfa{ width: 600px; margin:auto; } .kutu{ width: 100px; height: 100px; background-color: #D33257; } </style> |
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.
1 2 3 4 5 6 7 8 | .kutu{ width: 100px; height: 100px; background-color: #D33257; margin:50px; /*her yerden 50px boşluk bırakma*/ } |
Ekran çıktısı şu şekilde olacaktır.
Örnek 2: float özelliği verilmiş DIVler arasında boşluk bırakma.
1 2 3 4 5 6 7 8 9 10 | .kutu{ width: 100px; height: 100px; background-color: #D33257; float:left; margin:50px; /*her yerden 50px 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.
Ö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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .sayfa{ width: 600px; margin:auto; display: flex;/*esnek nesne*/ flex-wrap: wrap; /*nesne genişliklerini koruyor.*/ gap:50px; /*içindeki nesnelerin arasını 50px yapıyor.*/ padding:50px;/*nesnenin içinde 50px boşluk bırakıyor*/ } .kutu{ width: 100px; height: 100px; background-color: #D33257; } |
Yorum Yap