Kutu Boyutlandırma

CSS'de box-sizing, bir öğenin toplam genişliğinin ve yüksekliğinin nasıl hesaplandığını belirleyen bir özelliktir. Varsayılan olarak width ve height özellikleri yalnızca içeriğin boyutunu kapsar ve dolgu, kenarlık veya kenar boşluklarını hesaba katmaz. Ancak box-sizing özelliğini kullanarak bu davranışı değiştirebilir ve width ile height özelliklerinin dolgu ve kenarlık boyutlarını da kapsamasını sağlayabilirsiniz.

Bu, düzen hesaplamalarını basitleştirebilir ve beklenmedik boyutlandırma sorunlarını önleyebilir.

box-sizing özelliğini kullanmanın temel söz dizimi şöyledir:

selector {
    box-sizing: value;
}

value: Aşağıdakilerden biri olabilen, istenen kutu boyutlandırma davranışı:

• content-box: Bu varsayılan değerdir. width ve height özellikleri yalnızca içeriğin boyutunu içerir. Dolgu, kenarlıklar ve kenar boşlukları belirtilen genişlik ve yüksekliğin dışına eklenir.

• border-box: width ve height özellikleri içerik, dolgu ve kenarlık boyutlarını kapsar. Kenar boşlukları öğenin dışına eklenmeye devam eder.

Örneğin:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Varsayılan davranış */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

Bu örnekte, <div> öğesinin box-sizing değeri content-box'dır. Bu, <div> öğesinin gerçekte oluşturulan genişliğinin 300px (içerik) + 40px (sol ve sağ dolgu) + 10px (sol ve sağ kenarlık) = 350px olacağı anlamına gelir. Yükseklik de benzer şekilde hesaplanır.

Öte yandan, container sınıfına sahip öğenin box-sizing değeri border-box’dır. Bu durumda, belirtilen 400px width değeri içerik, dolgu ve kenarlığı kapsar. Gerçek içerik alanı, dolgu ve kenarlığa yer açmak için küçülür; bunun sonucunda içerik genişliği 400px - 60px (sol ve sağ dolgu) - 20px (sol ve sağ kenarlık) = 320px olur. Yükseklik de benzer şekilde hesaplanır.