Ukuran Kotak

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 39 dari 76.

Dalam CSS, box-sizing adalah property yang menentukan cara menghitung lebar dan tinggi total suatu elemen. Secara default, property width dan height hanya mencakup ukuran konten dan tidak memperhitungkan padding, border, atau margin. Namun, dengan menggunakan property box-sizing, kamu dapat mengubah perilaku ini dan membuat property width dan height juga mencakup ukuran padding dan border.

Ini dapat menyederhanakan perhitungan tata letak dan mencegah masalah ukuran yang tidak terduga.

Berikut sintaks dasar untuk menggunakan property box-sizing:

selector {
    box-sizing: value;
}

value: Perilaku box-sizing yang diinginkan, yang bisa berupa salah satu dari berikut:

content-box: Ini adalah nilai default. Property width dan height hanya mencakup ukuran konten. Padding, border, dan margin ditambahkan di luar width dan height yang ditentukan.

border-box: Property width dan height mencakup ukuran konten, padding, dan border. Margin tetap ditambahkan di luar elemen.

Contoh:

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

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

Dalam contoh ini, elemen <div> memiliki nilai box-sizing sebesar content-box. Ini berarti lebar aktual <div> yang dirender adalah 300px (konten) + 40px (padding kiri dan kanan) + 10px (border kiri dan kanan) = 350px. Tingginya akan dihitung dengan cara yang sama.

Di sisi lain, elemen dengan class container memiliki nilai box-sizing border-box. Dalam kasus ini, width yang ditentukan sebesar 400px mencakup konten, padding, dan border. Area konten sebenarnya akan menyusut untuk menyesuaikan padding dan border, sehingga lebar kontennya menjadi 400px - 60px (padding kiri dan kanan) - 20px (border kiri dan kanan) = 320px. Tingginya akan dihitung dengan cara serupa.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan dua elemen (<div>), masing-masing dengan class yang berbeda. Tugasmu adalah menggunakan property box-sizing untuk mengatur cara penghitungan lebar dan tinggi elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class content-box-div. Atur width menjadi 300px, height menjadi 200px, padding menjadi 20px, border menjadi 5px solid blue, dan box-sizing menjadi content-box.
Tulis aturan CSS yang menargetkan elemen <div> dengan class border-box-div. Atur width menjadi 300px, height menjadi 200px, padding menjadi 20px, border menjadi 5px solid red, dan box-sizing menjadi border-box.

Coba sendiri

<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>