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 hesaplanacağını belirleyen bir özelliktir. Varsayılan olarak, width ve height özellikleri yalnızca içeriğin boyutunu içerir; dolgu, kenarlık veya dış boşlukları 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, yerleşim hesaplamalarını basitleştirebilir ve beklenmedik boyutlandırma sorunlarını önleyebilir.

İşte box-sizing özelliğini kullanmak için temel sözdizimi:

selector {
    box-sizing: value;
}

value: İstenen box-sizing davranışı, aşağıdakilerden biri olabilir:

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

border-box: width ve height özellikleri içeriği, iç boşluğu (padding) ve kenarlık (border) boyutlarını içerir. Kenar boşlukları (margins) hala öğenin dışına eklenir.

Ö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> öğesi box-sizing değeri olarak content-box değerine sahiptir. Bu, <div> öğesinin gerçek işlenen 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 hesaplanacaktır.

Öte yandan, container sınıfına sahip öğe, border-box şeklinde bir box-sizing değerine sahiptir. Bu durumda, belirtilen 400px değerindeki width; içeriği, dolguyu ve kenarlığı içerecektir. Gerçek içerik alanı, dolgu ve kenarlığa yer açmak için küçülecek ve sonuç olarak 400px - 60px (sol ve sağ dolgu) - 20px (sol ve sağ kenarlık) = 320px şeklinde bir içerik genişliği oluşacaktır. Yükseklik de benzer şekilde hesaplanacaktır.

Görev

Kolay

Size iki farklı sınıfa sahip iki bölmeli (<div>) bir HTML belgesi verilmiştir. Göreviniz, bu öğelerin genişlik ve yüksekliğinin 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> sınıfına 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> sınıfına 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.

Kopya kağıdı

box-sizing özelliği, bir öğenin toplam genişliğinin ve yüksekliğinin nasıl hesaplanacağını belirler:

selector {
    box-sizing: value;
}

Değerler:

content-box (varsayılan): Genişlik ve yükseklik yalnızca içerik boyutunu içerir. İç boşluk (padding) ve kenarlıklar (border) dışarıdan eklenir.
border-box: Genişlik ve yükseklik; içerik, iç boşluk ve kenarlık boyutlarını içerir. Dış boşluklar (margin) hala dışarıdan eklenir.

/* content-box örneği */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* Toplam genişlik: 300px + 40px + 10px = 350px */
}

/* border-box örneği */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* Toplam genişlik: 400px (içerik sığacak şekilde küçülür) */
}

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>