Css de box sizing nedir ne amaçla kullanılır bunu öğreceneğiz.
Öncellikle tanımlamış olduğumuz bir elementin kapladığı alan şu şekilde belirlenir.
nesnenin genişliği + padding değeri + border değeri kapladığı alanı ifade eder.
Bunu bir örnek ile açıklayalım genişlik ve yüksekliği aynı olan iki adet 2 div tanımlayalım ama padding ve border değerlerini farklı verelim aynı alanı kaplamadığını görmüş olacağız.
<div id="bir" class="kutu"></div>
<div id="iki" class="kutu"></div>
.kutu{
height: 250px;
width: 250px;
margin: 5px;
}
#bir{
background-color: tomato;
border: 2px solid green;
}
#iki{
background-color: brown;
padding: 20px;
}

Yukarıda da görmüş olduğunu gibi bir elementin kapladığı alanı genişliği + padding + border toplamı ile belirlemiş oluruz.
Peki biz eğer padding ve border değerleri işin içine katmak istemezsek kullanmamız gereken özelliğimiz box-sizing : border-box değerini vermemiz gerekecektir. Bu sayede 2 div’imiz de eşit boyutu almış olacaktır.Ama içerik olarak tabi ki eşit olmayacaktır.
<div id="bir" class="kutu">Lorem ipsum dolor sit amet.</div>
<div id="iki" class="kutu">Lorem ipsum dolor sit amet.</div>
.kutu{
height: 250px;
width: 250px;
margin: 5px;
box-sizing: border-box;
}
#bir{
background-color: tomato;
border: 2px solid green;
}
#iki{
background-color: brown;
padding: 20px;
}

Bir sayfa tasarlamaya başlarken tüm değerlerin padding ve border değerlerini işin içine katmasak işimiz daha da kolaylaşacaktır.
Aşağıdaki gösterim tüm elementlerimiz için geçerli olacaktır.
*{
box-sizing:border-box;
}