CSS’te box-sizing özelliği nedir?

Şimdilerde bir çok yerde rast gelip bu ne la diye reaksiyonla karşıladığımız box-sizing nedir gelin güzel bir örnekle açıklayalım. Bir ev alıyorsunuz diyelim, ev kaç metrekare diye sorsam ne dersiniz? 100 metre kare diyelim. Ama içten mi yoksa dıştan mı? balkonlar dahil mi? şeklinde sorular sorabilirsiniz.

CSS’te kutu modelinde her elementin bir margin değeri, bir border değeri, bir padding değeri ve de en sonunda içeriği bulunur.

box-sizing ise elementin içeriğinin genişlik ve yükseklik değerlerinin neresi referans alınarak belirlenmesini sağlar. Yani diyelim ki 300px genişliğinde bir div’imiz mevcut. Bu 300px genişlik tam olarak padding ve border’lar dahil mi yoksa padding ve border hariç mi sorusunun cevabını box-sizing kullanarak belirleyebilirsiniz.

box-sizing initial ve inherit haricinde 2 adet değer alır. Bu değerler ve anlamları şu şekilde vuku bulmaktadır;

border-box : elementin genişlik ve yüksekliğine border ve padding değerleri dahildir.

content-box : elementin genişlik ve yüksekliğine border ve padding değerleri dahil değildir.

İşte bu kadar. Hadi geçmiş olsun koşun kodunuza.