Ukuran Kotak CSS
Ukuran Kotak CSS
Properti CSS box-sizingmemungkinkan kita untuk menyertakan padding dan border dalam total lebar dan tinggi elemen.
Tanpa Properti ukuran kotak CSS
Secara default, lebar dan tinggi elemen dihitung seperti ini:
lebar + bantalan + batas = lebar sebenarnya dari tinggi elemen
+ bantalan + batas = tinggi sebenarnya dari suatu elemen
Ini berarti: Saat Anda menyetel lebar/tinggi suatu elemen, elemen tersebut sering kali tampak lebih besar dari yang telah Anda tetapkan (karena batas dan bantalan elemen ditambahkan ke lebar/tinggi elemen yang ditentukan).
Ilustrasi berikut menunjukkan dua elemen <div> dengan lebar dan tinggi yang ditentukan sama:
Dua elemen <div> di atas menghasilkan ukuran yang berbeda pada hasil (karena div2 memiliki padding yang ditentukan):
Contoh
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Properti box-sizingmemecahkan masalah ini.
Dengan Properti ukuran kotak CSS
Properti box-sizingini memungkinkan kita untuk memasukkan padding dan border dalam total lebar dan tinggi elemen.
Jika Anda mengatur box-sizing: border-box;pada sebuah elemen, padding dan border disertakan dalam lebar dan tinggi:
Berikut adalah contoh yang sama seperti di atas, dengan box-sizing: border-box;
menambahkan kedua elemen <div>:
Contoh
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Karena hasil dari penggunaannya box-sizing: border-box;jauh lebih baik, banyak pengembang ingin semua elemen di halaman mereka bekerja dengan cara ini.
Kode di bawah ini memastikan bahwa semua elemen berukuran dengan cara yang lebih intuitif ini. Banyak browser sudah menggunakan box-sizing: border-box;banyak elemen formulir (tetapi tidak semua - itulah sebabnya input dan area teks terlihat berbeda pada lebar: 100%;).
Menerapkan ini ke semua elemen aman dan bijaksana:
Contoh
* {
box-sizing: border-box;
}
Properti Ukuran Kotak CSS
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |