Sifat box-sizing

Sifat box-sizing membolehkan anda mengubah cara pengiraan saiz elemen.

Secara lalai, menambah padding akan mengembangkan elemen: jika kita menetapkan lebar width 100px dan padding-left sebanyak 20px, maka lebar sebenar elemen akan menjadi 120px.

Dan jika kita menetapkan border-left sebanyak 10px, maka lebar sebenar elemen akan menjadi 130px. Iaitu, padding dan border mengembangkan blok (baik dari segi lebar mahupun ketinggian). Tingkah laku ini boleh diubah dengan menggunakan box-sizing.

Sintaks

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

Nilai

Nilai	Keterangan
`content-box`	Kedua-dua `padding` dan `border` mengembangkan blok.
`border-box`	Baik `padding` mahupun `border` tidak mengembangkan blok.

Nilai lalai: content-box.

Contoh . Tingkah laku piawai

Sekarang kedua-dua blok mempunyai ketinggian dan lebar yang sama, namun blok kedua mempunyai padding yang ditetapkan, manakala yang pertama tidak. Lihat bagaimana saiz mereka berbeza:

<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 . Tingkah laku piawai

Sekarang kedua-dua blok mempunyai ketinggian dan lebar yang sama, namun blok kedua mempunyai sempadan 10px yang ditetapkan, manakala yang pertama tidak. Lihat, bagaimana saiz mereka berbeza:

<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 . Tingkah laku piawai

Sekarang blok kedua mempunyai kedua-dua padding dan sempadan 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 kepada sifat box-sizing untuk elemen kedua. Sekarang saiz 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

sifat outline,
yang membuat sempadan tanpa mengembangkan elemen