content

Bir elemanın genişlik ve yüksekliğinin bütün tarayıcılarda doğru çalışmasını garantilemek için kutu modelinin nasıl çalıştığını bilmek gerekir. Bunun için aşağıdaki örnek üzerinden bir hesaplama yapalım:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    padding: 0;
}

Burada biraz uzun bir toplama işlemi gerekecek:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right padding)
= 350px

Tüm CSS elemanları birer kutu olarak düşünülebilir. CSS'te tasarım ve düzenden bahsediliyorsa, "Kutu Modeli" terimi kullanılır. CSS Kutu Modeli esasında HTML bileşenlerinin etrafını saran ve margin (kenar mesafesi), border (sınır), padding (boşluk) ve content (içerikten) oluşan elemanlardan ibarettir.

CSS Kutu Modeli, bize elemanların etrafına bir sınır ekleme (border) ya da elemanlar arasında bir boşluk (padding) tanımlama olanağı sağlar.

Aşağıdaki şema, CSS Kutu Modeli elemanlarını daha iyi kavramanıza yardımcı olacaktır: