Het ongedaan maken van elementuitbreiding in CSS

Over het algemeen is de uitbreiding die in eerdere lessen werd beschreven schadelijk en zou je er graag vanaf willen. Hiervoor is er in CSS de eigenschap box-sizing. Als je deze de waarde border-box geeft, dan zullen noch padding, noch de rand het blok uitbreiden:

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

css#elem1 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  margin-bottom: 20px;
}

#elem2 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  padding: 25px; /* stel padding in */
  border: 10px solid green;  /* stel rand in */
  box-sizing: border-box;  /* maak uitbreiding ongedaan */
}

Результат: