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

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

Värden

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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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