Tüm HTML öğeleri kutular olarak düşünülebilir.
CSS’de tasarım ve düzenden bahsederken “kutu modeli” yani “Box Model” terimi kullanılır.
CSS kutu modeli aslında her HTML öğesinin etrafını saran bir kutudur.
Şunlardan oluşur: kenar boşlukları, kenarlıklar, dolgu ve gerçek içerik. Aşağıdaki resim kutu modelini göstermektedir:
Yukarıdaki örneğin açıklaması da aşağıdaki gibidir.
İçerik – Metin ve resimlerin göründüğü kutunun içeriği
Padding (dolgu)- İçeriğin etrafındaki alanı temizler. Dolgu şeffaftır
Border (Kenarlık) – Dolgunun ve içeriğin etrafından geçen bir kenarlık
Margin – Sınırın dışındaki alanı temizler. Kenar boşluğu şeffaftır
Kutu modeli, elemanların etrafına kenarlık eklememize ve elemanlar arasındaki boşluğu tanımlamamıza olanak tanır.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>Bu metin kutunun içeriğidir. 50 piksel dolgu, 20 piksel kenar boşluğu ve 15 piksel yeşil kenarlık ekledik.</div>
</body>
</html>
Bir Elemanın Genişliği ve Yüksekliği
Bir elemanın genişliğini ve yüksekliğini tüm tarayıcılarda doğru şekilde ayarlayabilmek için kutu modelinin nasıl çalıştığını bilmeniz gerekir.
Önemli: Bir öğenin genişlik ve yükseklik özelliklerini CSS ile ayarladığınızda içerik alanının genişliğini ve yüksekliğini ayarlamanız yeterlidir. Bir öğenin tam boyutunu hesaplamak için ayrıca dolgu, kenarlıklar ve kenar boşlukları da eklemeniz gerekir.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<img src="golf.jpg" width="350" height="263" alt="golf">
<div>Yukarıdaki resim 350px genişliğindedir. Bu öğenin toplam genişliği de 350 pikseldir.</div>
</body>
</html> 
İşte hesaplama:
| 320 piksel (genişlik) 20 piksel (sol + sağ dolgu) 10 piksel (sol + sağ kenarlık) 0 piksel (sol + sağ kenar boşluğu) = 350 piksel |
Bir elemanın toplam genişliği şu şekilde hesaplanmalıdır:
Toplam öğe genişliği = genişlik + sol dolgu + sağ dolgu + sol kenarlık + sağ kenarlık + sol kenar boşluğu + sağ kenar boşluğu
Bir elemanın toplam yüksekliği şu şekilde hesaplanmalıdır:
Toplam öğe yüksekliği = yükseklik + üst dolgu + alt dolgu + üst kenarlık + alt kenarlık + üst kenar boşluğu + alt kenar boşluğu
