Box-sizing

box-sizing: border-box ile kutu hesaplamasını öğrenirsin.

box-sizing nedir?

Varsayılan olarak width yalnızca içerik alanını ölçer; padding ve border buna eklenir. Yani width: 200px + padding: 20px + border: 5px gerçek genişliği 250 piksel yapar. Buna content-box modeli denir.

box-sizing: border-box yazarsan, width padding ve border dahil toplam genişliği belirler. Aynı örnekte toplam 200 piksel kalır; içerik alanı daralır. Hesap daha sezgisel olduğundan çoğu geliştirici bunu tercih eder.

Tüm öğelere uygulamak

box-sizing varsayılanı değiştirmek için genelde tüm öğelere uygulanır. Yaygın kalıp:

*, *::before, *::after {
  box-sizing: border-box;
}

Bu kalıp her öğeyi, sözde öğeleri de dahil, border-box modeline geçirir. Böylece width: 100% yazdığında padding eklenince taşma olmaz. Kart ve kapsayıcı gibi bileşenlerde ölçü hesabı artık tutarlıdır.

Uygulama box-sizing kalıbını yaz

Tüm öğelere ve sözde öğelere box-sizing: border-box uygulayan kalıbı yaz. Seçiciler: *, *::before, *::after.

Örnek çözümü göster

*,
*::before,
*::after {
  box-sizing: border-box;
}

Kendini test et

border-box'ta toplam genişlik

/* width: 200px, padding: 20px, border: 5px, box-sizing: border-box */
/* toplam genişlik = ____px */

Cevabı göster

/* width: 200px, padding: 20px, border: 5px, box-sizing: border-box */
/* toplam genişlik = 200px */

box-sizing: border-box neyi değiştirir?
- width artık içerik alanını ölçer, padding ve border eklenir
- width padding ve border dahil toplam genişliği ölçer
- padding ve border artık kutudan çıkarılır
- margin de width içine dahil edilir
Cevabı göster

width padding ve border dahil toplam genişliği ölçer — Doğru. border-box'ta width padding ve border dahil toplam genişliktir.
Kutu modellerini eşleştir

content-box

Varsayılan kutu modeli
border-box

padding ve border width'e dahil
width: 200px (content-box)

İçerik 200px, toplam daha büyük
width: 200px (border-box)

Toplam 200px, içerik daha küçük

Sıradaki ders: Özet - Kart bileşeni

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler