Annulation de l'expansion des éléments en CSS

En règle générale, l'expansion décrite dans les leçons précédentes est néfaste et vous souhaiteriez vous en débarrasser. Pour cela, le CSS dispose de la propriété box-sizing. Si vous lui attribuez la valeur border-box, alors ni le padding, ni la bordure ne feront expansion du bloc :

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; /* définir les marges intérieures */
  border: 10px solid green;  /* définir la bordure */
  box-sizing: border-box;  /* supprimer l'expansion */
}

Результат: