Properti ukuran kotak CSS
Contoh
Sertakan padding dan border dalam total lebar dan tinggi elemen:
#example1 {
box-sizing: border-box;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti box-sizing
menentukan bagaimana lebar dan tinggi elemen dihitung: apakah harus menyertakan padding dan border, atau tidak.
Nilai bawaan: | kotak-konten |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.boxSizing="border-box" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh -webkit- atau -moz- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Sintaks CSS
box-sizing: content-box|border-box|initial|inherit;
Nilai properti
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Tentukan dua kotak berbatasan berdampingan:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Contoh
Setel "ukuran kotak universal":
* {
box-sizing: border-box;
}
Halaman Terkait
Tutorial CSS: Ukuran Kotak CSS
Referensi HTML DOM: properti boxSizing