Kutu Modeli

Önceki konu bir ögenin hangi bildirimleri alacağını çözdü. Değer artık kesin: bir hücrenin padding değeri 8px 12px. Ama bu değerin ne anlama geldiği söylenmedi. Hücrenin neresine 8 piksel eklenir? Eklenen boşluk hücrenin toplam enini büyütür mü, yoksa içindeki metnin alanını mı daraltır?

Bu soruların yanıtı kutu modeli (box model)’dir. Model tek bir cümleyle özetlenir: belge ağacındaki her öge, yerleşim sırasında bir ya da daha çok dikdörtgen kutuya dönüştürülür ve her kutu dört iç içe bölgeden oluşur. Bu ders o dört bölgeyi ve aralarındaki aritmetiği tanımlar.

Dört Bölge

Dıştan içe doğru:

Dış boşluk kutusu (margin box) en dıştaki dikdörtgendir. Kutunun komşularıyla arasındaki mesafeyi taşır. Saydamdır; arka plan buraya çizilmez.

Kenarlık kutusu (border box) dış boşluğun içindedir. Kenarlığın kendisi bu bölgenin sınırında çizilir.

İç boşluk kutusu (padding box) kenarlığın içindedir. İçerikle kenarlık arasındaki mesafeyi taşır. Dış boşluktan farklı olarak arka plan buraya kadar uzanır.

İçerik kutusu (content box) en içteki dikdörtgendir. Metin, görsel ya da alt kutular buraya yerleşir.

Bölgeleri ayıran üç sınır vardır ve her birinin ayrı bir adı vardır: içerik kenarı, iç boşluk kenarı, kenarlık kenarı, dış boşluk kenarı. Bu adlar background-clip, background-origin ve box-sizing gibi özelliklerin değerlerinde geçer.

Aritmetik

Her bölgenin ölçüsü, bir içteki bölgenin ölçüsüne iki kenar eklenerek bulunur. Yatay eksende:

$$\text{dolgu eni} = \text{içerik eni} + p_{\text{sol}} + p_{\text{sağ}}$$ $$\text{kenarlık eni} = \text{dolgu eni} + b_{\text{sol}} + b_{\text{sağ}}$$ $$\text{dış eni} = \text{kenarlık eni} + m_{\text{sol}} + m_{\text{sağ}}$$

Dikey eksende aynı toplamlar üst ve alt kenarlarla yapılır. Aşağıdaki program iki kutu için bu toplamları yürütür: ölçüm çizelgesinin bir hücresi ve sayfanın künye bölümü.

// kutu-olc.mjs — bir kutunun dort bolgesinin sinirlarini hesaplar
function kutuOlc({ icerikW, icerikH, padding, border, margin }) {
  const [pu, ps, pa, pl] = padding;   // ust, sag, alt, sol
  const [bu, bs, ba, bl] = border;
  const [mu, ms, ma, ml] = margin;
  const dolguW = icerikW + pl + ps;
  const dolguH = icerikH + pu + pa;
  const kenarlikW = dolguW + bl + bs;
  const kenarlikH = dolguH + bu + ba;
  const disW = kenarlikW + ml + ms;
  const disH = kenarlikH + mu + ma;
  return { dolguW, dolguH, kenarlikW, kenarlikH, disW, disH };
}

const hucre = {
  icerikW: 120, icerikH: 24,
  padding: [8, 12, 8, 12],
  border:  [0, 0, 1, 0],
  margin:  [0, 0, 0, 0],
};
const kunye = {
  icerikW: 640, icerikH: 96,
  padding: [24, 32, 24, 32],
  border:  [0, 0, 4, 0],
  margin:  [0, 16, 32, 16],
};

for (const [ad, k] of [["hucre", hucre], ["kunye", kunye]]) {
  const o = kutuOlc(k);
  console.log(`--- ${ad} ---`);
  console.log(`icerik   : ${k.icerikW} x ${k.icerikH}`);
  console.log(`dolgu    : ${o.dolguW} x ${o.dolguH}`);
  console.log(`kenarlik : ${o.kenarlikW} x ${o.kenarlikH}`);
  console.log(`dis      : ${o.disW} x ${o.disH}`);
  console.log(`cizilen alan (kenarlik kutusu): ${o.kenarlikW * o.kenarlikH} px2`);
  console.log(`yer kaplanan (dis kutusu)     : ${o.disW * o.disH} px2`);
}

--- hucre ---
icerik   : 120 x 24
dolgu    : 144 x 40
kenarlik : 144 x 41
dis      : 144 x 41
cizilen alan (kenarlik kutusu): 5904 px2
yer kaplanan (dis kutusu)     : 5904 px2
--- kunye ---
icerik   : 640 x 96
dolgu    : 704 x 144
kenarlik : 704 x 148
dis      : 736 x 180
cizilen alan (kenarlik kutusu): 104192 px2
yer kaplanan (dis kutusu)     : 132480 px2

Hücrede iki gözlem var. padding: 8px 12px bildirimi, dört değere açıldığında yatayda $12 + 12 = 24$, dikeyde $8 + 8 = 16$ piksel ekledi: içerik eni 120’den 144’e, boyu 24’ten 40’a çıktı. İç boşluk metnin alanını daraltmaz; kutuyu büyütür. Bu, önceki konuda sorulan sorunun yanıtıdır.

Yalnızca alt kenarlık verildiği için genişlik değişmedi, yükseklik 1 piksel arttı. Dış boşluk sıfır olduğundan kenarlık kutusu ile dış kutu aynı.

Künyede dış boşluğun etkisi görülüyor: kenarlık kutusu 704 birim genişken dış kutu 736 birim. Aradaki 32 birim çizilmez, ama komşu kutuları uzakta tutar. İki alan hesabının farkı — 132480 ve 104192 — bunu sayıyla verir.

Hangi Özellik Hangi Bölgeye Uygulanır

Kutu modelinin pratik değeri, görsel özelliklerin hangi bölgeye kadar uzandığını bilmektir.

Özellik	Kapsadığı bölge
background-color	İçerik + iç boşluk + kenarlık (kenarlık kutusuna kadar)
background-image	Öntanımlı olarak iç boşluk kutusuna yerleşir, kenarlık kutusuna kadar çizilir
border	Kenarlık kutusunun sınırında
box-shadow	Kenarlık kutusunun dışına (ya da inset ile içine)
outline	Kenarlık kutusunun dışına, yer kaplamadan

İki satır ayrıca vurgulanmalıdır.

Arka plan iç boşluğu kapsar. Bir düğmeye arka plan rengi ve iç boşluk verildiğinde, renkli alan metinden büyük olur — iç boşluk boyanmıştır. Aynı boşluk dış boşlukla verilseydi renkli alan yalnızca metin kadar olurdu. İki bildirimin görsel sonucu bu yüzden farklıdır.

Çerçeve yer kaplamaz. outline kenarlık kutusunun dışına çizilir ama yerleşimi etkilemez; komşu kutular sanki orada bir şey yokmuş gibi durur. Odak göstergesinin outline ile verilmesinin sebebi budur: odak değiştiğinde sayfa sarsılmaz. Aynı iş border ile yapılsaydı, odaklanan her ögede kutu büyür ve çevresindeki her şey kayardı.

Mantıksal Kenarlar

Kenarları adlandırmanın iki yolu vardır. Fiziksel adlar ekranı temel alır: margin-top, padding-left, border-right. Mantıksal adlar yazma yönünü temel alır: margin-block-start, padding-inline-start, border-inline-end.

Mantıksal adlar iki eksen tanımlar. Satır içi eksen (inline axis) metnin aktığı yöndür; soldan sağa yazılan bir belgede soldan sağa. Blok eksen (block axis) satırların yığıldığı yöndür; aynı belgede yukarıdan aşağı.

Sağdan sola yazılan bir belgede padding-inline-start sağ kenara denk gelir, padding-left yine sol kenarda kalır. Belge dili değiştiğinde biçemi yeniden yazmamak için mantıksal adlar tercih edilir. Bu kurs boyunca mantıksal adlar kullanılır; Web’in Temelleri ve HTML kursunda lang özniteliğinin taşıdığı bilgi, burada karşılığını bulur.

Dört kenarın kısayolları da mantıksal biçimde vardır: margin-block iki blok kenarı, margin-inline iki satır içi kenarı birden ayarlar. margin-inline: auto yazımı, bir bloku yatayda ortalamanın standart yoludur.

İstasyon Sayfasının Ölçüleri

/* istasyon.css — 8. adım: kutu ölçüleri */
.kunye {
  padding-block: 24px;
  padding-inline: 32px;
  margin-inline: 16px;
  margin-block-end: 32px;
  border-block-end: 4px solid #143a52;
  background-color: #f5f7f8;
}

.olcum-cizelgesi th,
.olcum-cizelgesi td {
  padding-block: 8px;
  padding-inline: 12px;
  border-block-end: 1px solid #d5dbe0;
}

Künyenin arka plan rengi iç boşluğu kapsar; başlık ile renkli alanın kenarı arasında 24 ve 32 birimlik bir aralık kalır. Dış boşluk ise renkli alanın dışında durur ve künyeyi kenarlardan uzak tutar.

Hücrelerde iç boşluk yatayda 12, dikeyde 8 birimdir. Çizelgede okunabilirliği sağlayan şey metnin kendisi değil, hücreler arasındaki bu aralıktır: iç boşluk kaldırıldığında sütunlar birbirine yapışır ve alt kenarlık sütunları ayırt etmekte tek başına yetersiz kalır.

Özet

• Her öge yerleşimde bir kutuya dönüşür; kutu dıştan içe dış boşluk, kenarlık, iç boşluk ve içerik bölgelerinden oluşur.
• Her bölgenin ölçüsü bir içtekine iki kenar eklenerek bulunur; iç boşluk içeriği daraltmaz, kutuyu büyütür.
• Arka plan kenarlık kutusuna kadar uzanır ve iç boşluğu kapsar; dış boşluk saydamdır ve yalnızca komşuları uzakta tutar.
• outline kenarlık kutusunun dışına çizilir ama yer kaplamaz; odak göstergesi bu yüzden onunla verilir, border ile verilseydi odak değiştikçe yerleşim kayardı.
• Mantıksal kenar adları yazma yönüne göre çözülür; blok eksen satırların yığıldığı yön, satır içi eksen metnin aktığı yöndür.

Sonraki Adım

Bu derste kutuya width verilmedi; içerik eni verildi ve dıştaki ölçüler ondan hesaplandı. Oysa biçem yazarken genellikle tersi yapılır: bir genişlik bildirilir ve içerik ölçüsü ondan türetilir. Bu türetmenin iki ayrı modeli vardır ve aralarındaki fark bir kutunun toplam enini değiştirir. Sonraki ders iki modeli aynı sayılarla karşılaştırır.