Avec un « box-sizing » égal à « border-box », on peut donner une largeur de 100% à un élément et lui ajouter du padding et des bordures sans que ceux-ci s’ajoutent et fassent dépasser l’élément de son parent. C’est là tout le principe : par défaut, les navigateurs modernes ajoutent le padding et les bordures aux dimensions de vos éléments, ils utilisent donc border-sizing: content-box. Avec « border-box », les marges internes et les bordures sont déduites des dimensions, ce qui simplifie grandement le travail d’intégration.
L’auteur de l’article nous informe aussi de l’utilisation de cet attribut par certains frameworks CSS.
Un grand coup de :
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
et les calculs sur le padding ne seront plus qu’un mauvais souvenir.
Un petit tour sur caniuse.com pour vérifier la compatibilité et on se rend compte qu’il n’y a que IE7 qui ne supporte pas cet attribut (la plupart des navigateurs ont un support partiel mais cela signifie qu’ils ne supportent que les valeurs « content-box » et « border-box » pour cet attribut donc pas de soucis dans notre cas). Mais il existe un polyfill pour palier au problème.