Kutu Boyutlandırma

Coddy'nin HTML Journey'sinin Styling with CSS 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 padding, kenarlıklar veya kenar boşluklarını hesaba katmaz. Ancak box-sizing özelliğini kullanarak bu davranışı değiştirebilir ve width ile height özelliklerinin padding 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: İstenen box-sizing behavior; aşağıdakilerden biri olabilir:

content-box: Bu, varsayılan değerdir. width ve height özellikleri yalnızca content boyutunu içerir. padding, border ve margin, belirtilen width ve height değerlerinin dışına eklenir.

border-box: width ve height özellikleri content, padding ve border boyutlarını içerir. 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; /* 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 class'ına sahip öğenin box-sizing değeri border-box'tır. Bu durumda, belirtilen width değeri olan 400px; content, padding ve border'ı içerecektir. Gerçek content alanı, padding ve border'ı karşılamak için küçülecek ve 400px - 60px (sol ve sağ padding) - 20px (sol ve sağ border) = 320px content genişliğiyle sonuçlanacaktır. height de benzer şekilde hesaplanacaktır.

Görev

Kolay

Her biri farklı bir class değerine sahip iki division (<div>) içeren bir HTML belgesi verilmektedir. Göreviniz, bu öğelerin width ve height değerlerinin nasıl hesaplanacağını kontrol etmek için box-sizing özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<strong>content-box-div</strong> class değerine sahip <div> öğ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.
<strong>border-box-div</strong> class değerine sahip <div> öğ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>