Dernière mise à jour : juillet 2022
Le langage CSS repose sur un modèle de boîte (box model). En effet, un document HTML étant un ensemble d'éléments composé pour chacun d'une forme rectangulaire, CSS va donc permettre de définir l'aspect général de ces formes grâce à des propriétés liées au concept.
Ainsi, pourra t-on définir la hauteur et la largeur, les marges, l'espacement, la bordure, les dépassements, le contour...
Généralement, on présente le modèle de boîte en CSS de cette manière :
Nous retrouvons donc les propriétés suivantes qui permettent de gérer le modèle de boîte en CSS :
width et height ainsi que les propriétés attachées telles que min-width, max-width, min-height et max-height pour la gestion de la largeur et de la hauteur du contenu (content).padding qui permet un espacement (ou rembourrage) à l'intérieur du contenu.border pour la création d'une bordure autour du contenu.margin pour l'espacement extérieur du contenu.box-sizingL'une des propriétés indispensables lorsque vous écrivez du CSS est box-sizing. Définie initialement dans CSS Basic User Interface Module Level 3 , cette propriété permet de modifier le modèle de boîte. En effet, en CSS, par défaut le rembourrage (padding) et la bordure (border) sont ajoutés en dehors de la boîte.
Dans l'exemple ci-dessous, nous déclarons une boîte dont la hauteur ainsi que la largeur sont définies à 100px. Nous ajoutons à cela un rembourrage de 10px en haut, à droite, en bas et à gauche. Idem pour la bordure mais de 5px.
Nous obtenons donc une boîte dont la dimension totale est de 130 x 130px. Nous ajoutons à la largeur un rembourrage à gauche et à droite de 10px soit 20px en tout, ainsi qu'une bordure de 5px à droite et à gauche soit 10px en tout. La largeur totale de la boîte équivaut bien à 130px. Le même calcul s'aplique à la hauteur.
Pour vous en convaincre, il vous suffit de retirer 30px de largeur et 30px de hauteur, soit une largeur et une hauteur de 70px et vous obtiendrez une boîte de 100 x 100px.
En utilisant la propriété box-sizing avec la valeur border-box, la boîte va inclure le rembourrage ainsi que la bordure au contenu.
Il existe une petite astuce toute simple que vous devez absolument connaître à propos de la propriété box-sizing. Il s'agit de déclarer celle-ci via un sélecteur universel tout au début de votre code CSS, de cette façon :
/*reset box model*/
*{
box-sizing: border-box; /*tous les éléments du document sont touchés*/
}
Cette solution fonctionne à merveille mais ne vise malheureusement pas les pseudo-éléments. Nous pouvons remédier à ce problème de cette manière :
*,
*::before,
*::after {
box-sizing: border-box;
}
D'autres propriétés vont servir à gérer le modèle de boîte.
Ci-dessous, un exemple de débordement où nous avons défini une hauteur et une largeur fixes en pixels :
Aussi, pour permettre au texte de ne pas dépasser la boîte, allons-nous utiliser la propriété overflow.
div{
width: 600px;
max-height: 150px;
overflow-y: auto;
border: .5rem solid #5040b7;
padding: 1rem;
background-color: #6753ea;
}
L'arrière-plan (ou fond), qu'il s'agisse d'une couleur (avec la propriété background-color) ou d'une image (avec la propriété background-image) se situe en-dessous de la boîte et s'étend jusqu'à la limite extérieure du cadre (sous une bordure par exemple).
Ajoutée dans CSS Backgrounds and Borders Module Level 3, la propriété background-clip permet de gérer le découpage d'un arrière-plan via trois valeurs (une quatrième a été ajoutée dans le quatrième niveau).
Techniquement, comme la valeur initiale de la propriété background-clip est border-box, il est fort probable que vous n'utilisiez que les deux autres valeurs.
Le cas du contour : à ne pas confondre avec la bordure, le contour, qui s'applique avec la propriété outline, n'occupe pas d'espace et se situe au-dessus du contenu sans en changer la taille. A juste titre, le contour n'est donc pas pris en compte dans le modèle de boîte.