Eigenschap box-sizing

De eigenschap box-sizing maakt het mogelijk de manier waarop de afmetingen van een element worden berekend te veranderen.

Standaard voegt het toevoegen van padding het element uit: als we een breedte width van 100px en padding-left van 20px instellen, dan zal de werkelijke breedte van het element 120px zijn.

En als we ook nog een border-left van 10px instellen, dan wordt de werkelijke breedte van het element 130px. Dat wil zeggen, padding en border vergroten het blok (zowel in breedte als in hoogte). Dit gedrag kan worden veranderd met box-sizing.

Syntaxis

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

Waarden

Standaardwaarde: content-box.

Voorbeeld . Standaard gedrag

Momenteel hebben beide blokken dezelfde hoogte en breedte, maar het tweede blok heeft wel padding ingesteld, en het eerste niet. Kijk hoe hun afmetingen verschillen:

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

Результат:

Voorbeeld . Standaard gedrag

Momenteel hebben beide blokken dezelfde hoogte en breedte, maar het tweede blok heeft een rand van 10px, en het eerste niet. Kijk hoe hun afmetingen verschillen:

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

Результат:

Voorbeeld . Standaard gedrag

Nu heeft het tweede blok zowel padding als een rand van 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;
}

Результат:

Voorbeeld . Waarde border-box

Laten we het tweede element de waarde border-box voor de eigenschap box-sizing toevoegen. Nu worden de afmetingen van zowel het eerste als het tweede element hetzelfde:

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

Результат:

Zie ook