Contoh
Menentukan bahwa <div> elemen harus memiliki padding dan perbatasan termasuk dalam lebar total elemen dan tinggi:
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti kotak-sizing yang digunakan untuk memberitahu browser apa sifat ukuran (width and height) harus mencakup.
Harus mereka termasuk perbatasan-kotak? Atau hanya konten-kotak (yang merupakan nilai default lebar dan tinggi sifat)?
| nilai default: | content-box |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.boxSizing="border-box" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau moz menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| box-sizing | 10,0 4.0 -webkit- | 8,0 | 29,0 2.0 moz | 5.1 3.2 -webkit- | 9.5 |
CSS Syntax
box-sizing: content-box|border-box|initial|inherit;Nilai properti
| Nilai | Deskripsi |
|---|---|
| content-box | Default. Lebar dan tinggi sifat (and min/max properties) hanya mencakup konten. Perbatasan, padding, atau marjin tidak termasuk |
| border-box | Lebar dan tinggi sifat (and min/max properties) termasuk konten, padding dan perbatasan, tetapi tidak margin |
| initial | Set properti ini ke nilai default. Baca tentang awal |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Contoh
Tentukan dua berbatasan kotak berdampingan:
div
{
box-sizing: border-box;
width: 50%;
float: left;
}
Cobalah sendiri " Pages terkait
CSS3 tutorial: CSS3 Box Ukuran
Referensi HTML DOM: boxSizing property