Cancelando a expansão de elementos em CSS

Geralmente, a expansão descrita nas lições anteriores é prejudicial e você gostaria de se livrar dela. Para isso, o CSS possui a propriedade box-sizing. Se você definir seu valor como border-box, nem o padding nem a borda irão expandir o bloco:

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; /* definindo preenchimentos */
  border: 10px solid green;  /* definindo a borda */
  box-sizing: border-box;  /* removendo a expansão */
}

Результат: