Egenskapen box-sizing

Egenskapen box-sizing låter dig ändra hur storleken på ett element beräknas.

Som standard lägger till av padding utökar elementet: om vi har satt en bredd på width 100px och padding-left på 20px, så blir elementets faktiska bredd 120px.

Och om vi också sätter en border-left på 10px, så blir elementets faktiska bredd 130px. Det vill säga, padding och border utökar blocket (både i bredd och höjd). Detta beteende kan ändras med box-sizing.

Syntax

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

Värden

Värde	Beskrivning
`content-box`	Både `padding` och `border` utökar blocket.
`border-box`	Varken `padding` eller `border` utökar blocket.

Standardvärde: content-box.

Exempel . Standardbeteende

Just nu har båda blocken samma höjd och bredd, men det andra blocket har padding satt, medan det första inte har det. Se hur deras storlekar skiljer sig åt:

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

Exempel . Standardbeteende

Just nu har båda blocken samma höjd och bredd, men det andra blocket har en kant på 10px, medan det första inte har det. Se hur deras storlekar skiljer sig åt:

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

Exempel . Standardbeteende

Just nu har det andra blocket både padding och 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;
}

Exempel . Värdet border-box

Lägger vi till värdet border-box för egenskapen box-sizing till det andra elementet. Nu blir storlekarna för både det första och det andra elementet desamma:

<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 även

egenskapen outline,
som skapar en kant som inte utökar elementet