CSS Box Model: Margin, Padding ve Border Rehberi

CSS'de her HTML elemanı görünmez bir kutu içinde yer alır. Bu kutu modeli (box model), web sayfasındaki her öğenin kapladığı alanı, komşu elemanlarla ilişkisini ve görsel düzenini belirleyen temel kavramdır. Box model'i anlamadan CSS layout oluşturmak, ölçüleri bilmeden mobilya yapmaya benzer — sonuç her zaman beklenenden farklı çıkar.

Box Model Katmanları

Her CSS kutusu dıştan içe doğru dört katmandan oluşur:

1. Content (İçerik)

Kutunun en iç kısmıdır; metin, görsel veya alt elemanlar burada yer alır. width ve height özellikleri varsayılan olarak bu alanı tanımlar.

.kutu {
  width: 300px;
  height: 200px;
}

2. Padding (İç Boşluk)

İçerik ile border arasındaki boşluktur. Arka plan rengi padding alanını da kapsar. Her yön için ayrı ayrı veya kısaltma ile tanımlanabilir:

/* Ayrı ayrı */
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;

/* Kısaltma: üst sağ alt sol */
padding: 20px 15px 20px 15px;

/* Kısaltma: dikey yatay */
padding: 20px 15px;

3. Border (Kenarlık)

Padding'in dışını çevreleyen çizgidir. Genişlik, stil ve renk olmak üzere üç özelliği vardır:

border: 2px solid #333;

/* Ayrı ayrı */
border-width: 2px;
border-style: solid;
border-color: #333;

/* Tek kenar */
border-bottom: 3px dashed #0066ff;

4. Margin (Dış Boşluk)

Kutunun dışındaki boşluktur ve komşu elemanlarla arasındaki mesafeyi belirler. Margin şeffaftır — arka plan rengi bu alana ulaşmaz.

margin: 20px auto; /* Dikey 20px, yatay ortalama */

box-sizing Özelliği

Varsayılan davranışta (content-box), width ve height yalnızca içerik alanını tanımlar. Padding ve border bu değerlerin üzerine eklenir. Bu durum hesaplama hatalarına yol açar:

/* content-box (varsayılan) */
.kutu {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}
/* Gerçek genişlik: 300 + 20*2 + 2*2 = 344px! */

border-box değeri bu sorunu çözer. Padding ve border, belirtilen genişliğe dahil edilir:

/* border-box — önerilen */
*, *::before, *::after {
  box-sizing: border-box;
}

.kutu {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}
/* Gerçek genişlik: 300px (içerik alanı küçülür) */

Modern CSS'de tüm projelerde border-box kullanmak en iyi pratiktir. Neredeyse her CSS reset dosyası bu kuralı içerir.

Outline vs Border

outline özelliği border'a benzer görünür ancak önemli farkları vardır:

• Outline kutu modelinin bir parçası değildir — alan kaplamaz
• Kutunun boyutunu değiştirmez
• Köşeleri yuvarlatılamaz (bazı tarayıcılarda outline-radius desteği yoktur)
• Genellikle erişilebilirlik için focus göstergesinde kullanılır

Margin Collapsing (Margin Çakışması)

CSS'in en kafa karıştırıcı davranışlarından biri margin collapsing'dir. Dikey komşu iki elemanın marginleri toplanmaz; bunun yerine büyük olan değer geçerli olur:

.paragraf-1 { margin-bottom: 30px; }
.paragraf-2 { margin-top: 20px; }
/* Aralarındaki boşluk 50px değil, 30px olur! */

Margin collapsing kuralları:

• Yalnızca dikey (block) yönde gerçekleşir, yatay (inline) yönde gerçekleşmez
• Flexbox ve Grid container'larında margin collapsing olmaz
• Ebeveyn ile ilk/son çocuğun marginleri de çakışabilir (padding veya border yoksa)
• Boş blok elemanların kendi üst ve alt marginleri birbiriyle çakışır

DevTools ile Box Model İnceleme

Tarayıcı geliştirici araçlarında (F12) herhangi bir elemanı seçtiğinizde, box model diyagramını görebilirsiniz:

• Chrome: Elements paneli → Computed sekmesi → en üstteki kutucuk diyagramı
• Firefox: Layout sekmesinde interaktif box model gösterimi
• Fareyle elemanın üzerine geldiğinizde, content (mavi), padding (yeşil), border (sarı) ve margin (turuncu) renkleriyle alanlar vurgulanır

DevTools'ta kutunun gerçek hesaplanmış boyutlarını görmek, layout sorunlarını teşhis etmenin en hızlı yoludur.