Box model

La notion de « modèle de boîte » en CSS correspond à la manière dont le navigateur interprète la largeur et la hauteur d’un élément. Le modèle standard produit une largeur apparente qui correspond à width + padding + border. De même pour la hauteur : height + padding + border.

Ce modèle standard, délicat à manier, peut être modifié en CSS. On évite ainsi de devoir faire des additions, et on peut utiliser des boîtes de largeur 100% sans craindre qu’elles ne dépassent du navigateur…

            /* Même styles (largeur, border, padding) pour chaque div */
article div { width:300px; border:20px solid black; background: #ddd; padding: 10px}
article p { background: #fff;  margin: 0; padding: 1em}
/* Valeurs différentes pour la propriété box-sizing */
#content-box div { box-sizing: content-box; }
#border-box div { box-sizing: border-box; }           

        

<div id="content-box">
300px de largeur + 20px de border + 10px de padding = 360px

<div id="border-box">
300px de largeur = 300px !
(padding et border compris)

Pour homogénéiser le rendu sur l’ensemble des boîtes, on peut (on doit…) utiliser le « sélecteur universel », qui affecte la propriété à l’ensemble des éléments HTML :

            *, *:after, *:before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }