CSS Kutu Boyutlandırma diğer adı ile “Box Sizing” bir kutu veya elamanı boyutlandırırken kullanılması gereken önemli etkenlerden biridir. Bir kutuya genişlik yada yükseklik verdiğimizde bu genişlik ve yüksekliği neye göre verdiğimizi biliyoruz ancak bazı durumlarda hiç hesaba katmadığımız bir durum ortaya çıkmaktadır. Örneğin 300px genişliğindeki bir kutunun içerisine 300px lik bir kutu daha eklediğimizde bu kutu diğer kutunun içerisine tam sığmayacaktır bunun nedeni ise tam olarak ta bahsedeceğimiz konudur.
CSS Kutu Boyutlandırma Çeşitleri
CSS Kutu Boyutlandırma (Box Sizing) özelliği 2 farklı değer almaktadır. Bu değerlerden biri “content-box” bir diğeri ise “border-box”dır. Bu iki değer birbirinden farklı olup çok önem taşımaktadır. Bazı durumlarda ilki kullanmamız gerekirken bazı durumlarda ise ikincisini kullanmamız gerekmektedir.
Content Box
CSS Kutu Boyutlandırma (Box Sizing) özelliğine “content-box” verildiğinde verilen yükseklik ve genişlik sadece içerik kısmı yani content kısmı için geçerlidir. Kenarlık ve Padding hesaba katılmaz. Yani 200px genişliği olan bir kutuya 3px kenarlık ve 10px padding verildiğinde toplam 226px olmaktadır. Yani verilen değerde kenarlık ve padding hesaba katılmaz sadece içerik kısmı hesaba katılır.
div {
box-sizing: content-box;
width: 200px;
height: 200px;
border: 3px solid red;
padding: 10px;
}
Border Box
CSS Kutu Boyutlandırma (Box Sizing) özelliğine “border-box” verildiğinde verilen yükseklik ve genişlik sadece içerik değil içeriğe dahil olarak kenarlıklar ve padding‘i de kapsar. Yani 200px genişliği olan bir kutuya 3px kenarlık ve 10px padding verildiğinde toplam yine 200px olur ve içerik sadece 174px alan tutacaktır. Yani verilen değerde kenarlık ve padding hesaba katılır ve boyutları kadar içerik boyutu azaltılır.
div {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 3px solid red;
padding: 10px;
}
Bir web tasarımcının bu tür konularda hassas olduğunu belirtmekte fayda var. Bu ve bunun gibi küçük detay olarak adlandırılan özellikler aslında çok büyük önem taşımaktadır. Genellikle bir web site ya da sayfası kodlamaya başlamadan önce CSS kısmının en üstüne bu detaylar belirtilir. Örneğin başlangıçta Box Sizing özelliğine Border-Box değeri atamak web siteniz için çok faydalı olacaktır. Bu durumda her düzenlediğiniz kısımda değerleri hesaplamanıza gerek kalmayacaktır.