Properti box-sizing CSS

Definisi dan penggunaan

Atribut box-sizing memungkinkan Anda mendefinisikan cara khusus untuk menyesuaikan elemen khusus untuk area tertentu.

Contoh, jika Anda ingin menempatkan dua kotak bersampingan dengan garis batas, Anda dapat menetapkan box-sizing menjadi "border-box". Ini akan membuat browser menampilkan kotak dengan lebar dan tinggi yang ditentukan, dan mengemas garis dan padding ke dalam kotak.

Lihat pula:

Pelajaran CSS3:Antarmuka pengguna CSS3

Panduan referensi HTML DOM:Atribut boxSizing

Contoh

Tentukan dua kotak bersampingan dengan garis batas:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Coba sendiri

Ada banyak contoh di dasar halaman.

Syntaks CSS

box-sizing: content-box|border-box|inherit;

Nilai atribut

Nilai Deskripsi
content-box

Ini adalah perilaku lebar dan tinggi yang ditetapkan oleh CSS2.1.

Lebar dan tinggi diterapkan terhadap kotak konten elemen.

Garis dan padding elemen digambarkan di luar lebar dan tinggi.
border-box

Lebar dan tinggi yang ditetapkan untuk elemen menentukan kotak batas elemen.

Artinya, setiap padding dan garis yang ditetapkan untuk elemen akan digambarkan di dalam lebar dan tinggi yang telah ditetapkan.

Lebar dan tinggi konten dapat didapatkan dengan mengurangi garis dan padding dari lebar dan tinggi yang telah ditetapkan.
inherit Ditetapkan bahwa nilai atribut box-sizing harus diwarisi dari elemen orang tua.

Detil teknis

Nilai default: content-box
Inheritance: no
Versi: CSS3
Syntaks JavaScript: object.style.boxSizing="border-box"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

Angka yang berisi -webkit- atau -moz- menunjukkan versi pertama yang menggunakan prefiks.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5