Egenskapen box-sizing

Egenskapen box-sizing lar deg endre måten størrelsene på et element beregnes.

Som standard utvider tillegg av padding elementet: hvis vi har satt en bredde width på 100px og padding-left på 20px, vil den faktiske bredden på elementet være 120px.

Og hvis vi i tillegg setter border-left på 10px, vil den faktiske bredden på elementet blí 130px. Det vil si at padding og border utvider blokken (både i bredde og høyde). Dette oppførselen kan endres med box-sizing.

Syntaks

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

Verdier

Verdi	Beskrivelse
`content-box`	Både `padding` og `border` utvider blokken.
`border-box`	Verken `padding` eller `border` utvider blokken.

Standardverdi: content-box.

Eksempel . Standard oppførsel

Nå har begge blokkene samme høyde og bredde, men den andre blokken har padding satt, mens den første ikke har det. Se hvordan størrelsene deres skiller seg:

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

Eksempel . Standard oppførsel

Nå har begge blokkene samme høyde og bredde, men den andre blokken har en kant på 10px, mens den første ikke har det. Se hvordan størrelsene deres skiller seg:

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

Eksempel . Standard oppførsel

Nå har den andre blokken både padding og kant på 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;
}

Eksempel . Verdien border-box

La oss legge til verdien border-box for egenskapen box-sizing på det andre elementet. Nå vil størrelsene på både det første og det andre elementet bli like:

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

Se også

egenskapen outline,
som lager en kant som ikke utvider elementet