Kutu modeli: padding, border, margin

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

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.

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.

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.

İlk örneği oku ve dene

<style>
  .kutu {
    width: 200px;
    padding: 20px;
    border: 3px solid #6366f1;
    margin: 30px;
    background-color: #eef2ff;
  }
</style>

<div class="kutu">Ben bir kutuyum</div>

Kenarlardan 30 piksel içeride, mor kenarlıklı, içi açık mor ve yazısı kenarlardan 20 piksel uzakta duran bir kutu görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. content-box içerik genişliğine padding ve border ekler.
2. border-box verilen genişliğe padding ve border değerlerini dahil eder.
3. margin komşu kutularla dış mesafeyi belirler.
4. max-width:100% kutunun kapsayıcısından geniş olmasını sınırlamaya yardım eder.

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

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

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. width:200px; padding:20px; border:3px için content-box toplamını hesapla.
2. Aynı kutuyu border-box yapıp ölçümü karşılaştır.
3. Kapsayıcıyı 180px genişliğe getir; max-width kuralının etkisini incele.

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

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

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Padding ile margin aynı yere boşluk koymaz; DevTools renkli kutu gösterimini incele.
2. Taşmayı genel overflow:hidden ile gizlemek metni erişilemez kılabilir.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

200px content-box + iki yanda 20px padding + 3px border kaç piksel eder?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.