Css Box Sizing

Bir nesnenin kapladığı alan nesnenin genişliği + padding + border değerlerinin toplamıdır.

Örneğin 2 tane <div>' in padding haricinde tüm özellikleri aynı olsun.

<div id="red"> 
</div>

<div id="blue"> 
</div>

div{
  margin:10px;
}

#red {  
  width:400px;
  height:50px;
  border:1px solid red;
}

#blue {  
  width:400px;
  height:50px;  
  border:1px solid blue;
  padding:20px;
}

Ancak örnekte görüldüğü gibi div' lerin kapladığı alan birbirinden farklıdır. Çünkü bir nesneye verdiğimiz genişlik ya da yükseklikten başka bir de padding ve border değerlerini işin içine katmamız gerekiyor ki; nesnenin kapladığı toplam alanı bulalım.

Örnek 1 için tıklayınız.

Bu durum çoğu zaman uğraşılması zor bir durum olarak algılanır ve bu duruma çözüm olarak box-sizing:border-box özelliği yardımımıza koşar. Yani nesnelerin kapladığı alanı bulmak için padding ve border genişlikleriyle uğraşmak zorunda değiliz.

Yukarıdaki örnekte tek değiştirmemiz gereken alan <div> lerin box-sizing özelliğini border-box yapmak olacaktır.

div{
  margin:10px;
  box-sizing:border-box;
}

div etiketleri için uyguladığımız box-sizing:border-box özelliğinden dolayı padding ve border değerlerinin kapladığı alan hesaba katılmaz ve nesnelerin kapladığı alan sadece verdiğimiz genişlik kadar olacaktır. 

Yani div için verdiğimiz genişlik+border+padding = 400px olacaktır.

Örnek 2 için tıklayınız.

Sadece div etiketlerine box-sizing:border-box vermek yerine sayfanın en başında * ile tüm etiketlere ulaşıp bu değeri vermek içinizi oldukça kolaylaştıracaktır.

* {
    box-sizing: border-box;
}