Kutu Boyutlandırma

Ö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ğ}}$$

// 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:

*, *::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:

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ı

/* 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.