Kutu modeli

Leyla bir karta width: 300px verdi, sonra biraz iç boşluk ve kenarlık ekledi; kart birden 300 piksellik sütuna sığmaz oldu. Neden? Çünkü tarayıcının gözünde sayfadaki her öğe bir kutudur ve boyutu yalnızca width'ten ibaret değildir. Kutu modelini anlayan, CSS'teki sürprizlerin yarısından kurtulur.

Her öğe bir kutudur

Bir kutu, içten dışa dört katmandan oluşur. Bunu bir koliye benzetebilirsin: içindeki eşya içeriktir, onu saran köpük iç boşluktur, karton kutu kenarlıktır, diğer kolilerle arasındaki mesafe ise dış boşluktur.

1. content (içerik) — metin, görsel ya da alt öğeler. Boyutunu width ve height belirler.
2. padding (iç boşluk) — içerik ile kenarlık arasındaki boşluk. Öğenin arka planı buraya da uzanır.
3. border (kenarlık) — kutunun çerçevesi: border: 2px solid teal kalınlığı, çizgi türünü ve rengi belirtir.
4. margin (dış boşluk) — kutu ile komşu öğeler arasındaki saydam mesafe.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .margin-zone { display: inline-block; background: #fde68a; }
  .box {
    width: 200px;
    padding: 20px;
    border: 6px solid #6366f1;
    margin: 24px;
    background: #e0e7ff;
  }
</style>

<div class="margin-zone">
  <div class="box">Content: 200px wide</div>
</div>
<p>Yellow = margin, blue frame = border,<br>light blue around the text = padding.</p>

Blok ve satır içi öğeler

display özelliği bir kutunun nasıl davranacağını belirler. Blok öğeler (<div>, <p>, <h1>, <ul>) yeni satırda başlar ve kullanılabilir genişliğin tamamını kaplar. Satır içi öğeler (<span>, <a>, <strong>) metnin akışında kalır; onlarda width ve height çalışmaz, dikey margin de komşu satırları itmez. inline-block ikisinin iyi yanlarını birleştirir: metin akışında kalır ama boyut kabul eder.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; line-height: 1.8; }
  .demo { background: #fde68a; border: 1px solid #f59e0b; }
  span.demo { width: 300px; }
  .ib { display: inline-block; width: 110px; text-align: center; background: #bbf7d0; }
</style>

<div class="demo">A div is a block: it takes the whole line.</div>
<p>A <span class="demo">span is inline</span>: width 300px is ignored.
  An <span class="ib">inline-block</span> accepts a width.</p>

İç ve dış boşluğun kısa yazımı

Her kenarı ayrı ayrı yazabilirsin: margin-top, margin-right, margin-bottom, margin-left. Ama genellikle kısa yazım kullanılır: tek bir özellikte bir, iki, üç ya da dört değer:

Genişliği verilmiş bir blok öğeyi ortalamak için sağ ve sol dış boşluğunu auto yap: margin: 0 auto. Tarayıcı kalan boş alanı iki yana eşit paylaştırır.

<style>
  body { font-family: system-ui, sans-serif; background: #f1f5f9; padding: 12px; }
  .card {
    max-width: 260px;
    margin: 0 auto;
    padding: 12px 20px 20px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
  }
  .btn { display: inline-block; padding: 8px 16px; border-radius: 999px;
         background: #14b8a6; color: white; }
</style>

<div class="card">
  <h3>Centered card</h3>
  <p>margin: 0 auto puts me in the middle.</p>
  <span class="btn">Read more</span>
</div>

`box-sizing`: boyut nasıl hesaplanır

Varsayılan olarak box-sizing: content-box geçerlidir: width yalnızca içeriğin genişliğidir, iç boşluk ve kenarlık üstüne eklenir. Leyla'nın sorunu da buydu. box-sizing: border-box ile ise width, kenarlık dâhil görünen kutunun tamamının genişliğidir; iç boşluk ve kenarlık yerlerini içeriden alır. Bu, hesabı çok kolaylaştırır.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .ruler { width: 200px; height: 6px; background: #1e293b; margin-bottom: 8px; }
  .demo { width: 200px; padding: 20px; border: 5px solid #0ea5e9;
          margin-bottom: 12px; background: #e0f2fe; }
  .bb { box-sizing: border-box; border-color: #f97316; background: #ffedd5; }
</style>

<div class="ruler"></div>
<div class="demo">content-box: 200 + 40 + 10 = 250px</div>
<div class="demo bb">border-box: exactly 200px</div>