--- title: 'Kutu Boyutlandırma' source: 'https://academia.sh/tr/kurslar/css-temelleri/kutu-boyutlandirma' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:15+00:00' license: 'CC BY-SA 4.0' --- # Kutu Boyutlandırma Bildirilen genişliğin hangi bölgeyi ölçtüğü; content-box ve border-box modellerinin aynı sayılarla karşılaştırılması ve en küçük–en büyük sınırların etkisi. Önceki derste kutunun bölgeleri içerik ölçüsünden başlanarak dışa doğru hesaplandı. Biçem yazarken genellikle tersi yapılır: bir `width` bildirilir ve kalan ölçüler ondan türetilir. Burada bir soru ortaya çıkar — bildirilen genişlik **hangi bölgeyi** ölçer? Bu sorunun iki yanıtı vardır ve ikisi de tanımlıdır. Hangisinin geçerli olacağı `box-sizing` özelliğiyle seçilir. Bu ders iki modeli aynı sayılarla karşılaştırır. ## İki Model `box-sizing: content-box` — bildirilen genişlik **içerik kutusunu** ölçer. İç boşluk ve kenarlık bu değerin dışına eklenir; kutunun kapladığı yer bildirilen değerden büyüktür. Bu, özelliğin başlangıç değeridir. `box-sizing: border-box` — bildirilen genişlik **kenarlık kutusunu** ölçer. İç boşluk ve kenarlık bu değerin içinden alınır; içerik kutusu geriye kalan kadardır. İkisi arasındaki fark bir tercih meselesi değil, farklı bir aritmetiktir: $$\text{content-box:}\quad W_{\text{kenarlık}} = w + p_{\text{sol}} + p_{\text{sağ}} + b_{\text{sol}} + b_{\text{sağ}}$$ $$\text{border-box:}\quad W_{\text{içerik}} = w - p_{\text{sol}} - p_{\text{sağ}} - b_{\text{sol}} - b_{\text{sağ}}$$ ```js // boyutlandirma.mjs — content-box ile border-box farkini sayiyla verir function coz({ width, padding, border, kutuModeli }) { const [pl, ps] = padding, [bl, bs] = border; const ek = pl + ps + bl + bs; if (kutuModeli === "content-box") { return { icerik: width, kenarlikKutusu: width + ek }; } // border-box: bildirilen deger kenarlik kutusudur; icerik geriye kalandir return { icerik: Math.max(0, width - ek), kenarlikKutusu: width }; } const durumlar = [ { ad: "kart", width: 300, padding: [16, 16], border: [1, 1] }, { ad: "dar kutu", width: 40, padding: [16, 16], border: [1, 1] }, ]; for (const d of durumlar) { for (const m of ["content-box", "border-box"]) { const r = coz({ ...d, kutuModeli: m }); console.log(`${d.ad.padEnd(9)} ${m.padEnd(11)} width=${d.width} -> icerik=${r.icerik} kenarlikKutusu=${r.kenarlikKutusu}`); } } console.log("--- uc sutun, her biri %33.333, ic bosluk 16, kenarlik 1 ---"); const kapsayan = 960; const yuzde = 100 / 3; for (const m of ["content-box", "border-box"]) { const w = kapsayan * yuzde / 100; const r = coz({ width: w, padding: [16, 16], border: [1, 1], kutuModeli: m }); const toplam = r.kenarlikKutusu * 3; console.log(`${m.padEnd(11)} sutun kenarlik kutusu=${r.kenarlikKutusu.toFixed(2)} ucunun toplami=${toplam.toFixed(2)} tasma=${(toplam - kapsayan).toFixed(2)}`); } ``` ``` kart content-box width=300 -> icerik=300 kenarlikKutusu=334 kart border-box width=300 -> icerik=266 kenarlikKutusu=300 dar kutu content-box width=40 -> icerik=40 kenarlikKutusu=74 dar kutu border-box width=40 -> icerik=6 kenarlikKutusu=40 --- uc sutun, her biri %33.333, ic bosluk 16, kenarlik 1 --- content-box sutun kenarlik kutusu=354.00 ucunun toplami=1062.00 tasma=102.00 border-box sutun kenarlik kutusu=320.00 ucunun toplami=960.00 tasma=0.00 ``` ## Sayıların Söylediği İlk iki satırda aynı bildirim iki farklı kutu üretti: `width: 300px` yazan bir kart, `content-box` modelinde 334 birim yer kaplarken `border-box` modelinde tam 300 birim kapladı. Aradaki 34 birim, iç boşluk ve kenarlığın toplamıdır ($16 + 16 + 1 + 1$). Dar kutu satırı bir sınır durumunu gösterir. `border-box` modelinde `width: 40px` verilen bir kutuda, 34 birimlik ek çıkarıldıktan sonra içeriğe yalnızca 6 birim kaldı. Ek toplamı bildirilen genişliği aşsaydı içerik ölçüsü sıfıra kelepçelenirdi; eksiye düşmez. Bu, kutu görünmez olmaz demektir — kenarlık kutusu yine 40 birimdir, ama içine hiçbir şey sığmaz. Üçüncü blok pratikteki asıl sorunu gösteriyor. Üç sütunu 960 birimlik bir kapsayıcıya yerleştirmek için her birine `width: 33.333%` yazıldığında `content-box` modelinde toplam 1062 birim tutuyor: 102 birimlik bir taşma. Sebep, yüzdenin **içerik kutusunu** ölçmesi ve iç boşlukla kenarlığın buna eklenmesidir. Aynı bildirim `border-box` modelinde tam oturuyor. Bu, `border-box` modelinin neden yaygın bir taban tercihi olduğunu açıklar: bir kutunun yer kaplamasını, o kutunun iç dolgusundan bağımsız kılar. İç boşluk 16'dan 24'e çıkarıldığında yerleşim bozulmaz; yalnızca içeriğe kalan alan daralır. Model bütün belgede tek biçimde kurulur: ```css *, *::before, *::after { box-sizing: border-box; } ``` Evrensel seçici sözde elemanları kapsamaz; bu yüzden üçü birlikte yazılır. Özgüllüğü $0,0,0$ olduğu için sonraki her kural bunu bastırabilir. ## Yükseklik Farklı Davranır `width` ve `height` simetrik görünür ama davranışları ayrılır. Bir blok kutunun genişliği, bildirilmediğinde kapsayan kutuyu doldurur. Yüksekliği ise bildirilmediğinde **içeriğine göre** belirlenir. Bu asimetri normal akışın bir sonucudur ve sonraki derslerde ele alınacaktır. Bunun bir sonucu, `height` yüzdesinin çoğu zaman işlememesidir. `height: 50%` bildirimi, kapsayan kutunun yüksekliği bilinmedikçe çözülemez; kapsayan kutunun yüksekliği de kendi içeriğine bağlıysa döngüsel bir tanım oluşur. Bu durumda yüzde `auto` gibi işlenir. Sabit yükseklik vermek ayrıca kırılgandır: metin beklenenden uzun olduğunda kutudan taşar. Yükseklik, taşma yönetimiyle birlikte düşünülmediği sürece bildirilmez. ## En Küçük ve En Büyük Sınırlar `min-width`, `max-width`, `min-height` ve `max-height` özellikleri hesaplanan ölçüyü sınırlar. Uygulama sırası tanımlıdır ve önemlidir: 1. Önce `width` (ya da `auto`) çözülür. 2. Sonuç `max-width` değerini aşıyorsa `max-width` değerine indirilir. 3. Bu sonuç `min-width` değerinin altındaysa `min-width` değerine yükseltilir. Sıra, `min-width` değerinin `max-width` değerini yendiği anlamına gelir. `min-width: 400px` ve `max-width: 300px` birlikte yazılırsa sonuç 400'dür. Bu üçlünün en sık kullanımı okunabilir bir metin sütunu kurmaktır: ```css main { max-width: 70ch; margin-inline: auto; } ``` `max-width` bir üst sınır koyar; kapsayıcı dardır diye kutu taşmaz, genişse metin okunamayacak kadar uzun satırlara yayılmaz. `margin-inline: auto` kalan alanı iki yana eşit dağıtır. Bu ikisi birlikte, sabit bir genişlik bildirmeden hem sınırlı hem uyumlu bir sütun verir. `ch` birimi bir sonraki konuda tanımlanacak; şimdilik yaklaşık karakter genişliği olarak okunabilir. ## İstasyon Sayfasının Boyutlandırması ```css /* istasyon.css — 9. adım: boyutlandırma modeli ve sınırlar */ *, *::before, *::after { box-sizing: border-box; } main { max-width: 70ch; margin-inline: auto; padding-inline: 16px; } .olcum-cizelgesi { width: 100%; } .olcum-cizelgesi .ad { width: 40%; } .konum-gorseli img { max-width: 100%; height: auto; } ``` Son kural sık gereken bir çifttir. Görsele `max-width: 100%` verilmesi, kapsayıcıdan geniş bir görselin taşmasını önler. `height: auto` ise en–boy oranını korur: yalnızca genişlik sınırlanırsa ve yükseklik belgede bildirilmiş kalırsa görsel ezilir. `.ad` sütununa yüzdeli genişlik verilmesi tablo yerleşiminde bir öneri gibi işler; tablo algoritması sütun genişliklerini içerikle birlikte değerlendirir. Tabloların ölçü davranışı kendi kurallarına tabidir ve buradaki modelin bütün ayrıntılarını izlemez. ## Özet - Bildirilen `width` değerinin hangi bölgeyi ölçtüğü `box-sizing` ile seçilir: `content-box` içerik kutusunu, `border-box` kenarlık kutusunu ölçer. - `content-box` modelinde iç boşluk ve kenarlık bildirilen değerin dışına eklenir; yüzdeli genişliklerde bu, taşmanın doğrudan sebebidir. - `border-box` modelinde içerik ölçüsü geriye kalan kadardır ve hiçbir zaman eksiye düşmez; ek toplamı bildirilen genişliği aşarsa sıfıra kelepçelenir. - Genişlik bildirilmediğinde kapsayanı doldurur, yükseklik bildirilmediğinde içeriğe göre belirlenir; bu asimetri yüzde yüksekliklerin çoğu zaman çözülememesinin sebebidir. - Sınırlar sırayla uygulanır: önce `max`, sonra `min`. Bu sıra `min` değerini `max` değerinden güçlü kılar. ## Sonraki Adım Bu iki derste kutunun ölçüleri hesaplandı ama kutunun **ne tür** bir kutu olduğu hiç sorulmadı. Bir paragraf neden kendi satırını kaplar da bir vurgu ögesi metnin içinde kalır? İkisine de `width` yazıldığında neden yalnızca biri etkilenir? Sonraki ders görüntüleme türlerini tanımlar ve bu farkın nereden geldiğini gösterir.