Box-sizing

2

Content-box vs Border-box

La propriété box-sizing définit si la dimension réelle d'un élément doit-être calculé de façon additive ou soustractive.

Par exemple, j'ai trois éléments dotés d'une largeur de 33.33% et d'un léger padding. Si nous sommes en box-sizing: content-box;, comme à gauche, ses valeurs s'additionnent, tandis qu'à droite, en box-sizing: border-box;, elles se soustraient.

Voir le CodePen de Simon Arnold (@smnarnold).

Content-box

Valeur par défaut.

Si on définit une largeur à un élément comme ci-dessus ⬆️, la largeur de la bordure et du padding sera alors ajoutée pour constituer la largeur réelle de l'élément. Dans ce cas, puisqu'il y a un padding de 4% sur l'élément, sa largeur réelle est de 4% + 33.33% + 4% = 41.33%.

Border-box

Indique au navigateur d'inclure la bordure et le padding dans le calcul de la dimension réel de l'élément. Toujours dans notre exemple, les éléments à droite sont compressés pour absorber la valeur padding. Leur largeur réelle reste donc 33.33% malgré la présence du padding de 4%.

Il est fréquent que des développeurs choisissent d'appliquer cette propriété à tous les éléments d'une page via le code suivant:

* { box-sizing: border-box; }

Ceci leur permet de simplifier grandement la réalisation de leur mise en page.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme