Eienskap box-sizing

Die eienskap box-sizing laat jou toe om die metode om die afmetings van 'n element te bereken, te verander.

Standaard maak die byvoeging van padding die element groter: as ons 'n breedte van width 100px en padding-left van 20px gestel het, sal die werklike breedte van die element 120px wees.

En as ons ook 'n border-left van 10px stel, sal die werklike breedte van die element 130px word. Dit beteken padding en border maak die blok groter (sowel in breedte as in hoogte). Hierdie gedrag kan verander word met box-sizing.

Sintaksis

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

Waardes

Waarde	Beskrywing
`content-box`	Beide `padding` en `border` maak die blok groter.
`border-box`	Nóg `padding`, nóg `border` maak die blok groter.

Standaardwaarde: content-box.

Voorbeeld . Standaard gedrag

Tans het albei blokke dieselfde hoogte en breedte, maar die tweede blok het padding gestel, en die eerste - nie. Kyk hoe hul afmetings verskil:

<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;
}

Voorbeeld . Standaard gedrag

Tans het albei blokke dieselfde hoogte en breedte, maar die tweede blok het 'n rand van 10px gestel, en die eerste - nie. Kyk, hoe hul afmetings verskil:

<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;
}

Voorbeeld . Standaard gedrag

Tans het die tweede blok beide padding en 'n rand van 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;
}

Voorbeeld . Waarde border-box

Laat ons die waarde border-box byvoeg vir die eienskap box-sizing van die tweede element. Nou sal die afmetings van beide die eerste en die tweede element dieselfde wees:

<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;
}

Sien ook

die eienskap outline,
wat 'n rand skep wat nie die element vergroot nie