Properti box-sizing

Properti box-sizing memungkinkan untuk mengubah cara menghitung ukuran elemen.

Secara default, penambahan padding akan memperluas elemen: jika kita mengatur lebar width 100px dan padding-left sebesar 20px, maka lebar sebenarnya dari elemen akan menjadi 120px.

Dan jika kita juga mengatur border-left sebesar 10px, maka lebar sebenarnya dari elemen akan menjadi 130px. Artinya, padding dan border memperluas blok (baik secara lebar maupun tinggi). Perilaku ini dapat diubah dengan menggunakan box-sizing.

Sintaks

selektor {
	box-sizing: content-box | border-box;
}

Nilai

Nilai	Keterangan
`content-box`	Baik `padding` maupun `border` memperluas blok.
`border-box`	Baik `padding` maupun `border` tidak memperluas blok.

Nilai default: content-box.

Contoh . Perilaku Standar

Saat ini kedua blok memiliki tinggi dan lebar yang sama, namun pada blok kedua padding diatur, sedangkan pada blok pertama - tidak. Perhatikan bagaimana perbedaan ukuran mereka:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Contoh . Perilaku Standar

Saat ini kedua blok memiliki tinggi dan lebar yang sama, namun pada blok kedua diatur border sebesar 10px, sedangkan pada blok pertama - tidak. Perhatikan, perbedaan ukuran mereka:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Contoh . Perilaku Standar

Saat ini blok kedua memiliki baik padding maupun border sebesar 10px:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Contoh . Nilai border-box

Mari tambahkan nilai border-box untuk properti box-sizing pada elemen kedua. Sekarang ukuran elemen pertama dan kedua akan menjadi sama:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Lihat Juga

properti outline,
yang membuat border tanpa memperluas elemen