CSS'de box-sizing özelliği, bir öğenin boyutlandırılma şeklini kontrol eder. Bu özellik, bir öğenin genişlik ve yükseklik değerlerinin, sınırlayıcı çerçeve (border) ve dolgu (padding) boyutlarını içerip içermeyeceğini belirler. box-sizing özelliği ile, geliştiriciler daha tutarlı ve tahmin edilebilir bir şekilde öğe boyutlandırması yapabilirler.

box-sizing özelliğinin alabileceği iki ana değer vardır:

content-box: Bu varsayılan CSS kutu modelidir. Öğenin genişlik ve yükseklik değerleri, yalnızca içerik alanını kapsar. Sınırlayıcı çerçeve ve dolgu, belirtilen genişlik ve yüksekliğe eklenir, bu da öğenin aslında daha büyük bir alana yayılmasına neden olur. Yani, öğenin toplam genişliği = içerik genişliği + sol dolgu + sağ dolgu + sol çerçeve genişliği + sağ çerçeve genişliği ve benzer şekilde yükseklik için de geçerlidir.

Bu, her tarafında 2 piksel kenarlık ve 4 piksel dolgu bulunan 100 piksel × 100 piksel bir öğenin, 88 piksel × 88 piksel iç içerik alanıyla 100 piksel × 100 piksel olarak işleneceği anlamına gelir.

border-box: Bu değerle, öğenin genişlik ve yüksekliği, içerik alanının yanı sıra dolgu ve sınırlayıcı çerçeveyi de içerir. Bu, öğenin belirtilen boyutun ötesine geçmemesini sağlar, bu da düzen oluştururken tahmin etmeyi kolaylaştırır. Yani, belirttiğiniz genişlik ve yükseklik doğrudan öğenin dış kutusuna uygulanır, ve dolgu ile çerçeve iç bu boyutların içine dahil edilir.

Örnek kullanım:

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
}

Bu durumda, .box sınıfına sahip öğe, toplamda 100x100 piksel boyutunda olacaktır. border-box kullanıldığı için, dolgu ve çerçeve boyutları belirtilen genişlik ve yükseklik içinde hesaplanır. Eğer content-box kullanılsaydı, öğenin toplam genişliği ve yüksekliği dolgu ve çerçeveler dahil edilerek hesaplanırdı ve bu öğe daha büyük bir alana yayılırdı.

box-sizing özelliği, modern web tasarımında yaygın bir şekilde kullanılır çünkü daha öngörülebilir ve yönetilebilir bir kutu modeli sağlar, özellikle de çeşitli cihaz ve ekran boyutları için duyarlı tasarımlar oluşturulurken.

TailwindCSS: