CSS3 Box-Sizing Özelliği ile Genişlik ve Yüksekliklerin Belirlenmesi


Twitter'da Paylaş Favorilerime Ekle

Box-Sizing Özelliği

Css Box-Model konumuzda sayfa tasarımı yapılırken html elemanlarının width (genişlik), height (yükseklik), margin (dış boşluk), padding (iç boşluk), border (kenarlık) gibi özelliklerinin nasıl ayarlanması gerektiğini anlatmıştık. Bu geleneksel yönteme göre bir nesnenin toplam kapladığı yer hesaplanırken width, margin, padding ve border değerlerinin tümünün ne kadar yer kapladığı hesaplanmalıdır.

Eğer bu yöntemi kullanmakta zorlanıyorsak, box-sizing özelliği işimizi biraz kolaylaştırabilir.

Not: Box-Sizing özelliği bazı eski tarayıcı versiyonlarında –webkit- ve –moz- ön ekleri ile desteklense de, daha eski versiyonlarda hiç desteklenmeyeceği için, geleneksel yöntemi de öğrenmekte fayda var.

Box-Sizing Özelliğinin Kullanımı

Bir html elemanına box-sizing: border-box; özelliği uyguladığımızda, border ve padding değerleri de width değeri içerisinde kabul edilir. (margin değeri dahil edilmez.)

Bunu iki örnek ile açıklayalım.

1. örneğimizde iki kutu yer alıyor. Bunların ikisinin de width değeri 200px’tir. Ancak padding değerleri farklıdır. İkinci kutu padding değeri daha fazla olduğu için, hem genişlik hem de yükseklik olarak daha fazla yer kaplamaktadır.

.kutu1 {
    width: 200px;
    height: 100px;
    padding: 0px;
    border: 1px solid blue;
}
 
.kutu2 {
    width: 200px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}
Box-sizing örneği
Box-sizing örneği

2. örneğimizde de kutuların özellikleri aynı. Ancak kutulara ayrıca box-sizing: border-box; özelliği uyglanmıştır. Box-sizing özelliği sayesinde kutuların width özelliğinde belirtilen değer kadar yer kaplaması sağlanıyor.

* Aynı şeyler yükseklik (height) için de geçerlidir.

.kutu1 {
    width: 200px;
    height: 100px;
    padding: 0px;
    border: 1px solid blue;
    box-sizing: border-box;
}
 
.kutu2 {
    width: 200px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
Box-sizing örneği
Box-sizing örneği

Yani box sizing özelliği, width değerinin anlamını değiştiriyor şeklinde düşünebiliriz.

Konu Örnekleri kısmında bu örneklerin kodlarını değiştirerek sonuçları görebilirsiniz.

Border-box değerinden başka şu değerler de kullanılabilir:

content-box: Normal hale döndürür. Width değeri sadece içerik kısmının genişliğini ifade eder.

initial: Varsayılan değere döndürür.

inherit: Bir üst etiketin (parent) değeri geçerli olur. 

Tüm Etiketlere Uygulama: Sayfa tasarımında box-sizing özelliğini kullanacaksak, her elemana tek tek yazmak yerine, aşağıdaki gibi kısa yoldan tüm elemanlara uygulayabiliriz.

* {
    box-sizing: border-box;
}
css box sizing kullanımı ve örnekleri, html elemanlarının kapladığı yeri hesaplama, width padding ve border ayrı ayrı hesaplamadan tasarım yapma

KONU İLE İLGİLİ ÖRNEKLER

Box-sizing özelliğinin kullanımı Kendin Dene

YORUMLAR



CSS Dersine Ait Diğer Konular: