box-sizing

Je pensais avoir publié une page sur cet attribut que j'utilise régulièrement.

Lorsque vous mettez une bordure sur une image ou un cadre, cette bordure bien s'ajouter aux dimensions de votre élément; ce n'est généralement pas gênant mais si vous construisez un montage avec plusieurs éléments dedans, vous souhaitez avoir des dimensions "hors-tout" et non devoir calculer les positionnements avec bordures.

De même, si vous placez un espace intérieur entre le texte et la bordure (padding), la valeur s'ajoute à celle du cadre.

Un attribut, que vous pouvez rechercher sur le net, pour avoir plus d'informations, permet de placer la bordure et les espaces intérieurs dans la dimension que vous avez définie pour votre montage:

box-sizing:border-box.

<p style="width: 20vw; height: 10vw; background: yellow; border: 1vw solid green; padding: 1vw; font-size: 0.8vw;">sans attribut</p>

La largeur du cadre est de 20vw, la bordure de 1vw et le padding de 1vw: les dimensions de l'élément, en largeur est de 24vw.
Sa hauteur est de 10vw+1vw+1vw+1vw+1vw=14vw.
Les unités sont ici adaptatives mais vous pouvez utiliser d'autres unités, le résultat sera le même !

<p style="box-sizing: border-box; width: 20vw; height: 10vw; background: yellow; border: 1vw solid green; padding:1vw; font-size: 0.8vw;">avec attribut</p>

La largeur du cadre est de 20vw, et sa hauteur de 10vw, bordure et padding compris.