CSS · Kutu modeli: padding, border, margin — videolu atölye

Kutu modeli: padding, border, margin

Kutu modelini hesaplamak ve taşmayı nedenine göre çözmek.

Kavramı kur

Her CSS kutusunda içerik alanı, padding, border ve dıştaki margin bulunur. Varsayılan content-box modelinde width yalnızca içerik genişliğidir. Bu nedenle 200px genişlik, iki tarafta 20px padding ve 3px border toplamda 246px yer kaplar; margin bu kutunun dışına ayrıca eklenir.

Neden böyle çalışıyor?

box-sizing:border-box genişlik hesabına padding ve border değerlerini dahil eder. Böylece width:200px dediğinde kutunun dış kenarlığına kadar olan genişliği 200px tutabilirsin. Margin hâlâ dışarıdadır. Bu kural bir kutuyu otomatik olarak mobil uyumlu yapmaz; verilen genişliğin kapsayıcıya sığması da gerekir.

Çalışma sırası

Taşma gördüğünde sayfaya overflow:hidden ekleyip belirtisini gizleme. DevTools kutu modelinde genişliği, padding değerlerini ve üst kapsayıcıyı incele. Uzun bölünemeyen metin, sabit min-width veya flex öğesinin minimum boyutu da taşmaya neden olabilir; sorunu gerçek kaynağında düzelt.

İkinci örnek · 1

content-box içerik genişliğine padding ve border ekler. Kodun tamamı yazılı derste bulunur.

<style>
* { box-sizing: border-box; }
.kart { width: 240px; max-width: 100%; padding: 20px;
  border: 4px solid #2563eb; margin: 12px 0; }
</style>
<div class="kart">Dış genişliğim en fazla 240px.</div>

Beklenen sonucu oku

max-width:100% kutunun kapsayıcısından geniş olmasını sınırlamaya yardım eder.

Beklenen: Padding ve kenarlığıyla birlikte en fazla 240px genişliğinde bir kutu.

Bir değeri sen değiştir

width:200px; padding:20px; border:3px için content-box toplamını hesapla. Aynı kutuyu border-box yapıp ölçümü karşılaştır.

Hata nereden gelir?

Padding ile margin aynı yere boşluk koymaz; DevTools renkli kutu gösterimini incele.

Kendi çözümünü kur

Kapsayıcıyı 180px genişliğe getir; max-width kuralının etkisini incele. İki yatay taraf vardır: genişliğe sağ ve sol padding ile sağ ve sol border eklenir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>*{box-sizing:border-box}.kutu{width:200px;max-width:100%;padding:20px;border:3px solid #245f9e}</style>
<div class="kutu">Toplam genişlik: 200px.</div>

Kendini kontrol et

200px content-box + iki yanda 20px padding + 3px border kaç piksel eder? Yanıt: 246px; margin hesabın dışında ayrıca yer kaplar.

Beklenen: border-box sayesinde 200px dış genişlik; iç alan 154px.