CSS "box-sizing" özelliği, bir HTML elementinin genişliği ve yüksekliğinin nasıl hesaplanacağını belirler. Bu özellik, elementin genişliği ve yüksekliği için kullanılan değerlerin nereden alınacağını gösterir.

"box-sizing" özelliği ile, elementin genişliği ve yüksekliği, içerik alanının yanı sıra padding ve border değerlerini de içerebilir.

"box-sizing" özelliğinin iki temel seçeneği vardır: "content-box" ve "border-box". "content-box" varsayılan olarak seçilidir ve elementin genişliği ve yüksekliği sadece içerik alanını temsil eder. "border-box" ise elementin genişliği ve yüksekliği, içerik alanının yanı sıra padding ve border değerlerini de içerir.

Aşağıdaki örneklere bakalım...

/* Varsayılan olarak "content-box" seçilir */
div {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid black;
}

/* "border-box" seçildiğinde */
div {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid black;
}

Bu örnekte, ilk div elementi için genişlik ve yükseklik sadece içerik alanını temsil ederken, ikinci div elementi için genişlik ve yükseklik, içerik alanının yanı sıra padding ve border değerlerini de içerir.

Sonuç olarak, "box-sizing" özelliği, elementin genişliği ve yüksekliği için kullanılan değerlerin nereden alınacağını belirler ve "content-box" ve "border-box" gibi seçenekler sunar. Bu özellik, elementin tasarımını özelleştirmek için kullanılabilir.