Css Box Sizing Nedir ? Nasıl Kullanılır ?

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;
}