- Konu sahibi
- #1
CSS
CSS kutu modeli bir elementi içerik, padding, border ve margin alanlarına ayırır.
Örneğin bir kutuya
Aşağıdaki HTML ve CSS'yi boş bir dosyaya koyup tarayıcıda açın:
Beklenen sonuç, ilk kutunun dıştan 348 piksel, ikinci kutunun ise dıştan 300 piksel genişlikte görünmesidir. İlk hesapta 300 piksel içerik, her iki tarafta toplam 40 piksel padding ve toplam 8 piksel border vardır. İkinci kutuda bu alanlar 300 piksellik toplam genişliğin içinden pay alır.
İki kutu aynı genişlikte görünüyorsa geliştirici araçlarında uygulanan stilleri kontrol edin. Başka bir kuralın
Padding ve border’ın belirtilen ölçünün içinde hesaplanmasını istiyorsanız
Bu yaklaşımda
Sık yapılan hata,
box-sizing, bir elemente verilen width ve height değerlerinin içerik, iç boşluk ve kenarlıkla birlikte toplam ölçüye nasıl dönüştürüleceğini belirleyen özelliktir. CSS başlangıç değeri content-box olduğunda genişliğe padding ve border eklenir. border-box kullanıldığında ise verilen genişlik ve yükseklik, içerik ile birlikte iç boşluk ve kenarlığı da kapsar.İki değer arasındaki fark
CSS kutu modeli bir elementi içerik, padding, border ve margin alanlarına ayırır.
margin her iki box-sizing değerinde de elementin ölçüsüne dahil değildir. Fark, width ve height değerlerinin hangi kutuyu ölçtüğündedir.Örneğin bir kutuya
width: 300px, her iki kenarda padding: 20px ve border: 4px verirseniz:content-boxile gerçek genişlik 300 + 40 + 8 = 348 piksel olur.border-boxile gerçek genişlik 300 piksel kalır; içerik alanı padding ve border için küçülür.
border-box taşma sorunlarını azaltır.Çalıştırılabilir en küçük örnek
Aşağıdaki HTML ve CSS'yi boş bir dosyaya koyup tarayıcıda açın:
Kod:
<div class="box content">content-box</div>
<div class="box border">border-box</div>
<style>
.box {
width: 300px;
padding: 20px;
border: 4px solid #333;
margin-bottom: 12px;
background: #eee;
}
.content {
box-sizing: content-box;
}
.border {
box-sizing: border-box;
}
</style>Beklenen sonuç, ilk kutunun dıştan 348 piksel, ikinci kutunun ise dıştan 300 piksel genişlikte görünmesidir. İlk hesapta 300 piksel içerik, her iki tarafta toplam 40 piksel padding ve toplam 8 piksel border vardır. İkinci kutuda bu alanlar 300 piksellik toplam genişliğin içinden pay alır.
İki kutu aynı genişlikte görünüyorsa geliştirici araçlarında uygulanan stilleri kontrol edin. Başka bir kuralın
width, padding veya box-sizing değerini ezmesi mümkündür. Ayrıca box-sizing ölçüyü belirler; uzun içerik kutunun içine sığmıyorsa metin taşması, satır kırılması veya overflow gibi ayrı bir düzenleme gerekebilir.| Değer | width/height neyi ölçer? | Padding ve border sonucu |
|---|---|---|
content-box | Yalnızca içerik alanını | Toplam ölçüye eklenir |
border-box | İçerik + padding + border alanını | Belirtilen ölçünün içinde kalır |
Projelerde hangi kullanım tercih edilmeli?
Padding ve border’ın belirtilen ölçünün içinde hesaplanmasını istiyorsanız
border-box genellikle daha anlaşılır tercihtir. Bir projede tutarlı davranış sağlamak için tüm elementlere doğrudan veya kalıtımla uygulanabilir:
Kod:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}Bu yaklaşımda
html temel değeri alır; elementler ve sözde elementler inherit ile aynı davranışı kullanır. Yalnızca belirli bir kutunun varsayılan hesaplamaya dönmesi gerekiyorsa o seçicide box-sizing: content-box tanımlayabilirsiniz.Sık yapılan hata,
border-box seçildiğinde padding ve border'ın yok olduğunu sanmaktır. Bunlar görünmeye devam eder; yalnızca toplam ölçünün içine dahil edilir. Diğer hata ise margin'i hesaplamaya katmaktır. Margin kutunun dışındaki boşluktur ve box-sizing tarafından kontrol edilmez. Son olarak, box-sizing kalıtsal değildir; bu yüzden yalnızca body üzerinde verilen değer, tüm alt elementlere kendiliğinden uygulanmaz.