--- title: 'Kutu Modeli' source: 'https://academia.sh/tr/kurslar/css-temelleri/kutu-modeli' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:14+00:00' license: 'CC BY-SA 4.0' --- # Kutu Modeli Her ögenin dört iç içe dikdörtgenden oluşan bir kutuya dönüşmesi; içerik, iç boşluk, kenarlık ve dış boşluk bölgelerinin sınırları ve aritmetiği. Ö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ü. ```js // 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 ```css /* 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.