CSS Kutu Modeli

2 253

Her HTML elementini dikdörtgen şeklinde bir kutuya benzetebiliriz.Çünkü elementler belgede (HTML belgesi) bu şekilde yer kaplarlar.Bu duruma CSS kutu modeli yani box model denmektedir.

Kutu modeli bir elementin belgede kapladığı alanı ifade eder.Kutu modeli içerik alanı, padding, border ve margin değerlerinden oluşan yapıdır.Aşağıdaki görüntü kutu modelini resmetmektedir.

Normal koşullarda bir elemente width ve height değerleri verdiğimiz de içerik alanının genişlik ve yüksekliğini oluştururuz.Elemente verilen genişlik ve yükseklik özellikleri sadece içerik alanını boyutlandırır.Fakat elemente ait border, margin ve padding değerleri varsa element sayfada daha farklı boyutlarda yer kaplar.

Önemli :Elemente verilen height ve width içerik alanının boyutunu değiştirir.Eğer elementin border ve padding değerleri varsa, elementin gerçek boyutuna bu değerler de eklenir.Margin değeri de eklenirse o zaman kapladığı alan değişir.Yani padding ve border elementin boyutu değiştirirken, margin değeri elementin kapladığı alana etki eder.

Not : HTML elementleri görünüm özelliklerine göre 2 gruba ayrılır.Satır düzeyinde ve blok düzeyinde elementler.Kutu modelini anlamak için bu iki tip element grubunu iyi kavramak gerekiyor.Çünkü kutu modeli bu grup için farklı şekilde işlemektedir.

Kutu modelini oluşturan parçaları açıklayalım.

İçerik (content) alanı : Elementin esas gövdesini temsil eder.Yani elemente arkaplan rengi verdiğinizde, genişlik veya yükselik özelliği verdiğiniz de bu alana uygulamış olursunuz.

Padding alanı :, Kenarlık ile içerik arasında kalan saydam iç boşluk olarak tarif edilir.Elemente verilen padding değeri kadar, element genişler.Eğer element arka plan rengi alırsa bu alanda o rengi alacaktır.Ama element bir yazı içeriyorsa ya da fotoğraf padding alanı kullanılmayacaktır.

Padding hakkında detaylı bilgi almak için göz atın.

Kenarlık (border) alanı : Padding ve margin arasında kalan border-width özelliği ile oluşturulan bir alandır.

Margin alanı : Elementi diğer elementlerden ayıran, kenarlığın dışında kalan boşluk olarak ifade edilir.Margin alanı da padding gibi saydam bir yapıdadır.Renk veya herhangi bir görünüm almaz.Esas görevi elementleri, diğer elementlerden ayırmaya yarayan boşluktur.

Margin hakkında detaylı bilgi almak için göz atın.

Elementlerin Ebatları Nasıl Hesaplanır?

Bir elemente genişlik ve yükseklik vermek için width ve height özelliklerinin kullanıldığını daha önceki derslerden biliyorsunuz.Ama yukarıda da öğrendiğiniz gibi elementin sahip olduğu yükselik ve genişlik, o elementin bir belge de kapladığı alanı temsil etmiyor.

Bu alanı bulmak için elemente ait margin,padding ve border değerlerini de bilmeniz gerekiyor.Fazla kafa karıştırmamak için örnekler ile devam edelim.

Yukarıda ki div elementimize yükseklik ve genişlik değeri olarak 200px verdik, ayrıca kenarlık özelliğini border:none ile yok saydık.Padding ve margin değerlerine sıfır (0) verdik.Yani bu elementimizin tam boyutu ve belgede kapladığı alan genişlik olarak 200px, yükseklik olarak 200px diyebiliriz.

Şimdi de aşağıdaki  kodlara bakalım ve açıklayalım.

Bu örneğimizde elementimizin genişlik ve yükseklik özelliklerini yukarıdaki ile aynı yaptık.Fakat bu elementimizin her yönüne 4px değerinde kenarlık eklendik ve yine her yönüne 10px margin ve padding değeri verdik.

Şimdi normalde bu elementimizin genişliği 200px, yüksekliği 200px dir.Ama bu değer yukarıda da öğrendiğimiz gibi içerik alanının genişliği ve yüksekliğidir.Elementimizin border,margin ve padding değerleri olduğu için sayfada kapladığı alan farklı olacaktır.

Kutu modeli yani belgede kapladığı alan şöyle hesaplanır:

Kapladığı toplam genişliği : içerik genişliği(width) + sağ ve sol padding + sağ ve sol kenarlık + sağ ve sol margin
Bu örnek için: 200px + 2*10px + 2*4px + 2*10px = 248px

Kapladığı toplam yüksekliği : içerik yüksekliği(height) + üst ve alt padding + üst ve alt kenarlık + üst ve alt margin
Bu örnek için: 200px + 2*10px + 2*4px + 2*10px = 248px

Not : Elemente verilen padding ve border değerleri elementin toplam genişlik ve toplam yükseliğine etki eder.Margin değerini de eklerseniz o zaman toplam kapladığı genişlik ve toplam kapladığı yükseliğe olarak yani kutu modeli olarak ifade edilir.Bu küçük farkı unutmayın.

Not : CSS box-sizing: border-box özelliği ile padding ve border değerlerini içeriğin toplam genişlik ve toplam yükseklik değerlerinin içerisine alabiliriz.Box-sizing konusunu ilerleyen zamanlar da ekleyeceğim.

CSS hakkında iyi bir temele sahip olmak ve bir çok özelliğini doğru uygulayabilmek adına kutu modeli oldukça önemli bir konudur.Eğer anlamadığınız veya yanlış olduğunu düşündüğünüz bir yer olursa mutlaka yorum kısmından geri dönüş yapın.

Tüm CSS Dersleri için tıklayın

BİZE KATILIN - KOLAY ERİŞİM
BİZE KATILIN - KOLAY ERİŞİM
İçeriklere ve web tasarım dünyasındaki gelişmelere kolay erişmek için bültene abone olmayı unutmayın
İstediğiniz zaman abonelikten çıkabilirsiniz.
Bunları da beğenebilirsin