Bonsoir à tous,
Je n'arrive pas à comprendre le principe box-sizing: border-box.
avez vous un lien ou/et une explication?

Merci à tous
Hello !

Par défaut, en CSS, les dimensions d'un élément s'appliquent uniquement à son contenu. Celà veut dire qu'un paragraphe à qui on aurait défini un width de 200px, un padding de 10px et une bordure de 1 px (juste un exemple pris au hasard) fera en réalité 222px de large (width + 2 * padding + 2 * bordure).

La propriété CSS box-sizing permet de définir la méthode de calcul des dimensions d'un élément. La valeur par défaut est content-box, dont le comportement vient d'être expliqué. En revanche, la valeur border-box permet d'inclure le padding et les bordures dans le calcul des dimensions d'un élément. Si l'ont reprend l'exempple précédent, l'élément fera effectivement 200px de large. Le contenu de cet élément fera lui 158px de large (width - 2 * padding - 2 * bordures).

Voilà une ressource qui pourrait t'aider en plus : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing
Meilleure solution