Die Herroeping van elementuitbreiding in CSS

Normaalweg is die uitbreiding wat in vorige lesse beskryf is, skadelik en sal jy daarvan ontslae wil raak. Vir dit is daar die eienskap box-sizing in CSS. As jy die waarde border-box daaraan toewys, dan sal nóg padding, nóg die grens die blok uitbrei:

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 spasieering in */
  border: 10px solid green;  /* stel grens in */
  box-sizing: border-box;  /* verwyder uitbreiding */
}

Результат: