Kutu Boyutlandırma

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 39 / 76.

CSS'te 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 içerir ve dolgu, kenarlık veya dış 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 içermesini sağlayabilirsiniz.

Bu, düzen hesaplamalarını basitleştirebilir ve beklenmeyen 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ı içerir. Kenar boşlukları hâlâ öğenin dışına eklenir.

Örneğin:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Default behavior */
}

.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 olarak ayarlanmıştır. Bu, <div> öğesinin gerçekte oluşturulan genişliğinin 300px (içerik) + 40px (sol ve sağ iç boşluk) + 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 şeklindedir. Bu durumda, belirtilen width 400px değeri içeriği, dolguyu ve kenarlığı içerir. Gerçek içerik alanı, dolgu ve kenarlığa yer açmak için küçülür ve 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.

Görev

Kolay

Farklı sınıflara sahip iki bölüm (<div>) içeren bir HTML belgeniz var. Göreviniz, bu öğelerin genişlik ve yüksekliklerinin nasıl hesaplandığını kontrol etmek için box-sizing özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<div> sınıfına sahip <strong>content-box-div</strong> öğesini hedefleyen bir CSS kuralı yazın. width değerini 300px, height değerini 200px, padding değerini 20px, border değerini 5px solid blue ve box-sizing değerini content-box olarak ayarlayın.
<div> sınıfına sahip <strong>border-box-div</strong> öğesini hedefleyen bir CSS kuralı yazın. width değerini 300px, height değerini 200px, padding değerini 20px, border değerini 5px solid red ve box-sizing değerini border-box olarak ayarlayın.

Kendin dene

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>