Egenskaben box-sizing

Egenskaben box-sizing tillader at ændre metoden til beregning af et elements dimensioner.

Som standard tilføjer padding elementet: hvis vi har angivet en bredde width på 100px og padding-left på 20px, vil elementets faktiske bredde blive 120px.

Og hvis vi også angiver en border-left på 10px, vil elementets faktiske bredde blive 130px. Det vil sige, at padding og border udvider blokken (både i bredde og højde). Dette behavior kan ændres med box-sizing.

Syntaks

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

Værdier

Værdi	Beskrivelse
`content-box`	Både `padding` og `border` udvider blokken.
`border-box`	Hverken `padding` eller `border` udvider blokken.

Standardværdi: content-box.

Eksempel . Standard behavior

Begge blokke har samme højde og bredde, men den anden blok har padding angivet, mens den første ikke har. Se, hvordan deres størrelser adskiller sig:

<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 behavior

Begge blokke har samme højde og bredde, men den anden blok har en kant på 10px, mens den første ikke har. Se, hvordan deres størrelser adskiller sig:

<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 behavior

Nu har den anden blok både padding og en 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 . Værdien border-box

Lad os tilføje værdien border-box for egenskaben box-sizing til det andet element. Nu vil størrelserne på både det første og andet element blive de samme:

<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å

egenskaben outline,
som laver en kant, der ikke udvider elementet