box model

Si nous parlons de la propriété width, nous devrions parler du box model. Quand vous ajustez la propriété width d'un élément, celui-ci peut paraître plus gros que ce que vous avez indiqué : la bordure et le padding de l'élément l'étirent au delà de la largeur spécifiée. Regardez l'exemple suivant, où deux éléments ayant la même largeur se retrouvent avec deux tailles différentes.

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

Pendant des générations, les maths étaient la solution à ce problème. Les auteurs des CSS attribuaient à la propriété width des valeurs inférieures à ce qu'ils souhaitaient, soustrayant le padding et la bordure. Heureusement, vous n'êtes plus obligés de faire ça...