Yükleniyor...

CSS Box Sizing

Padding ve border’ın kutuyu ilan edilen width’ten büyük yapabildiğini biliyorsunuz. box-sizing bu hesabın kuralını seçer: width «yalnızca content» mi demektir, yoksa «content artı padding artı border» mı?

Bir bakışta iki model

📊 content-box ve border-box

Model width / height neyi kapsar Günlük etki
content-box (varsayılan) Yalnızca content Padding ve border ilan edilen boyutun dışına eklenir
border-box Content + padding + border İlan edilen boyut dış border kenarıdır; content sığmak için küçülür
Margin İkisinde de yok Dış boşluk box-sizing’den ayrı kalır

Varsayılan: content-box

Varsayılan modelde width: 200px content’i ölçer. Padding ve border ekleyin — boyalı kutu büyür.

Content-box (varsayılan)

css
CSS Code 
.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* Content 200px + padding + border → toplam daha geniş */

border-box’a geçin

border-box ile aynı width: 200px padding ve border’ı içerir. Dış kenar ~200px’e yakın kalır; content alanı küçülür.

Border-box boyutlandırma

css
CSS Code 
.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* Dış border kutusu 200px hedefler; content küçülür */

Aynı sayılar, farklı iz

Her iki modeli aynı genişlik, padding ve border ile yan yana koyun.

İki modeli karşılaştır

css
CSS Code 
.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}

.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Aynı bildirimler; .contenty daha çok yatay yer kaplar */

Ekipler border-box’ı neden sever

Bir kartın sütunu tam doldurması gerektiğinde — örneğin padding’li width: 100% — border-box kartın parent’tan taşmasını engeller.

Sütun dostu kart

css
CSS Code 
.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}

Sakin bir global alışkanlık

Birçok stil sayfası günlük genişlik hesabını öngörülebilir tutmak için her şeye bir kez border-box koyar. Margin hâlâ dışarıdadır.

Evrensel border-box alışkanlığı

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

Kendiniz deneyin

  1. content-box altında width: 200px, padding ve border ile .panel-content kurun.
  2. box-sizing: border-box ile .panel-border kopyalayın — dış boyutun 200px’e yaklaştığını görün.
  3. Aynı sayılarla .contenty ve .borderish’i yan yana koyun.
  4. Padding’li bir width: 100% kart yapın; box-sizing’i değiştirip hangisinin taştığını görün.
  5. Küçük bir demo sayfada evrensel * alışkanlığını deneyin.

Sık hatalar

  • Border-box’ın margin’i de kapsadığını sanmak (kapsamaz)
  • Değiştirene kadar varsayılanın content-box olduğunu unutmak
  • Outline’ın box-sizing’i izlemesini beklemek (outline dışarıda kalır ve hâlâ düzen yeri kaplamaz)
  • content-box altında ağır padding’li width: 100% yazıp taşmaya şaşırmak
  • Hangi boyutlandırma modelinin aktif olduğunu bilmeden yüzdeleri karıştırmak

Özet

  • Varsayılan box-sizing: content-box content’i ölçer; padding ve border eklenir
  • border-box padding ve border’ı ilan edilen genişlik/yükseklik içinde tutar
  • Margin her iki modelin dışındadır
  • Border-box çoğu zaman sütun genişliklerini ve width: 100% kartları kolaylaştırır
  • Evrensel border-box sıfırlaması yaygın, sakin bir alışkanlıktır

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders