CSS Dersleri 47 - Box-sizing Kullanımı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Box-sizing Kullanımı Konusunu öğreneceğiz.

CSS box-sizing özelliği, bir etiketin toplam genişliğine ve yüksekliğine iç boşluk (padding) ve çerçeve (border) eklememizi sağlar.

Varsayılan olarak, bir etiketin genişliği ve yüksekliği şu şekilde hesaplarız :

  • genişlik (width) + iç boşluk (padding) + çerçeve (border) = Bir etiketin kapladığı toplam genişlik
  • yükseklik (height) + iç boşluk (padding) + çerçeve (border) = Bir etiketin kapladığı toplam yükseklik

Bknz : CSS Dersleri 11 - Box Model (Kutu Modeli)

Bu demek oluyor ki, bir etiketin genişliğini/yüksekliğini ayarladığınızda, etiket genellikle ayarladığınızdan daha büyük görünür (çünkü öğenin çerçevisi ve iç boşluğu etiketin belirtilen genişliğine/yüksekliğine eklenir).

Aşağıdaki kodlarda, aynı genişlik ve yüksekliğe sahip iki div etiketi göstermektedir:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Bu div'lerin çıktısına bakıldığında, her ne kadar genişlik ve yükseklikleri aynı olsada ekranda kapladıkları alanın farklı olduğunu görmektesiniz. 

Bu sorunu box-sizing özelliği çözer.

CSS'de box-sizing özelliği, bir etiketin toplam genişliğine ve yüksekliğine padding ve border'ı dahil etmemizi sağlar.

Box-sizing değeri olarak border-box değeri atarsak ; bir etikette, padding ve border genişlik ve yüksekliğe dahil edilir.

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Box-sizing özelliğini tüm etiketlerde kullanmak her zaman avantajlı olacaktır. Bu yüzden global değişkene tanımlanıp kullanılabilir.

* {
  box-sizing: border-box;
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla