Avbryt utvidelse av elementer i CSS

Som regel er utvidelsen beskrevet i tidligere leksjoner skadelig og du vil gjerne bli kvitt den. For dette har CSS egenskapen box-sizing. Hvis du setter den til verdien border-box, vil verken padding eller ramme utvide blokken:

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; /* setter innvendig marg */
  border: 10px solid green;  /* setter ramme */
  box-sizing: border-box;  /* fjerner utvidelse */
}

Результат: