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;
}
<div class="simple">

Je suis plus petit...

</div>
<div class="fancy">

Et je suis plus grand !

</div>

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...

  • Creative Commons License
  • Ads by Bocoup