Box-sizing

Le titre de cette page est le nom de l'attribut qui va vous permettre de mettre une bordure autour d'un élément sans modifier ses dimensions.

Dans notre cas, l'attribut s'écrira: box-sizing:border-box;

Ce code va indiquer au programme que les dimensions choisies sont à appliquer à l'élément (ici, l'image) avec sa bordure.

Ainsi, dans mon exemple, j'ai créé un cadre de 338x600px avec une bordure extérieure de 4 px, ce qui fait que ce cadre mesure: 338+4+4=346px et 600+4+4=608px.

Je place dedans des images bordées d'un liseré blanc de 3px et je veux que ça rentre dans l'espace vide de mon cadre, soit 338x600px; je vais donc indiquer à chaque image de conserver sa largeur et hauteur avec bordure comprise.

J'ai placé un cadre texte, à côté du montage, avec images à survoler et j'ai également écrit le même attribut à ce cadre car, ne voulant pas que le texte colle à la bordure, j'ai défini un écart intérieur (padding) de 10px entre ce texte et la bordure, écart qui, comme la bordure, vient, en principe, s'ajouter aux dimensions du cadre; avec box-sizing:border-box;, cet espace intérieur sera compris dans la dimension choisie et non ajouté.

La différence entre les 2 cadres est l'épaisseur (4px) de la bordure du cadre de gauche, qui est ajoutée au cadre de gauche et non au cadre de droite.