CSS Kutu Modeli - Box Model

CSS " Kutu modeli " tasarım amacıyla kullanılmaktadır. Kutuların (div) diğer kutular ile olan mesafesini veya kutu içinde ki içerik ile kutu arasında ki mesafeyi ayarlamak için kullanılır. Ayrıca kutunun kenar kalınlığıda belirleyebiliriz, bu özellikleri ilerleyen konularda ayrıntılı olarak göreceğiz.

" Kutu modeli " HTML/XHMTL etiketlerinin etrafını saran bir kutudur " Kutu modeli " , margin (Dış kenar boşluğu), border (Kenar kalınlığı), padding (İç kenar boşluğu) ve içerikten oluşur.

Yukarıda ki görseli açıklayalım.

margin - Asıl div 'in (Turuncu renklere sahip olan kutunun) diğer kutulara, görsellere, içeriklere vs. olan mesafesini belirler. Yani margin özelliği turuncu kutuya kimsenin yaklaşmamasını sağlar.
border - Turuncu kutunun kalınlığının ne kadar olacağını, çerçeve stilini ve çerçeve rengini belirtmek için kullanılır.
padding - Turuncu kutu ile turuncu kutu içerisinde ki içeriğin arasında ki mesafeyi belirlemek için kullanılır.
İçerik - Bizim tarafımızdan belirtilen metinler, görseller vs. yer alır.

" width " ve " height " 'ın tüm tarayıcılarda doğru çalışması için " Kutu Modeli " nin nasıl çalıştığının bilinmesi gerekmektedir.

CSS Genişlik ve Yükseklik Özelliği - Width & Height of an Element

" width " ve " height " ile sadece içeriğin boyutlarını belirlersiniz. Toplam boyut için padding, border ve margin'i de hesaba katmanız gerekir.

Toplam boyutu 350px (piksel) olan bir örneği görelim...

width:300px;
padding:10px;
border:5px solid gray;
margin:10px;

Genişliği Hesaplayalım...

300px (width 'den (Genişlikten) geliyor.)
     + 20px (Sağdan ve Soldan verilen padding'lerden (İç Kenar Boşluğundan) geliyor.)
     + 10px (Sağdan ve Soldan verilen border 'dan (Kenar Kalınlığından) geliyor.)
     + 20px (Sağdan ve Soldan verilen margin'lerden (Dış Kenar Boşluğundan) geliyor.)
     = 300px

Yalnızca 250px alanımız olduğunu düşünelim ve 250px toplam genişliğe sahip bir kutu / eleman yapalım.

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

Bir elemanın toplam genişliği hep böyle hesaplanmalıdır;

Toplam eleman genişliği = width + sağ padding + sol padding + sağ border + sol border + sağ margin + sol margin .

Bir elemanın toplam yüksekliği hep böyle hesaplanmalıdır;

Toplam eleman yüksekliği = height + üst padding + alt padding + üst border + alt border + üst margin + alt margin .

Tarayıcıların Uyumluluğunu Düzenlemek

Internet Explorer, toplam genişliği doğru olarak hesaplayamamaktadır. Sorunu çözmek için DOCTYPE eklemeniz yeterlidir. DOCTYPE hakkında bilgi almak için 9. ve 10 maddelere buradan bakabilirsiniz.