Le modèle de boîte

Donne à une boîte width: 200px, 16px de padding et une bordure de 2px : par défaut, elle occupe 236 pixels de large à l'écran, et non 200.

Chaque élément est une boîte

Pour mettre en page, le navigateur transforme chaque élément en rectangle. Chaque boîte a quatre couches, de l'intérieur vers l'extérieur. La zone de contenu contient le texte ou l'image. Le padding (marge intérieure) est l'espace à l'intérieur de la boîte, entre le contenu et la bordure, et il prend la couleur de fond de la boîte. La bordure est une ligne autour du padding. La marge est l'espace à l'extérieur de la bordure qui repousse les autres boîtes ; elle est toujours transparente. Les outils de développement du navigateur dessinent exactement ce schéma quand tu inspectes un élément, avec les valeurs indiquées.

Le raccourci pour les quatre côtés

padding, margin et border-width acceptent une à quatre valeurs, dans le sens des aiguilles d'une montre à partir du haut. padding: 16px règle les quatre côtés. padding: 8px 16px met 8 en haut et en bas, et 16 à gauche et à droite. padding: 4px 8px 12px 16px règle le haut, la droite, le bas et la gauche, dans cet ordre. On peut aussi régler chaque côté séparément, comme avec margin-top. border: 2px solid #333 règle ensemble l'épaisseur, le style et la couleur ; sans un style comme solid ou dashed, aucune bordure n'est dessinée.

box-sizing : le réglage que presque tout le monde change

Par défaut, width et height fixent seulement la taille de la zone de contenu, et le padding et la bordure s'ajoutent par-dessus. C'est le modèle content-box, et il complique les mises en page : deux boîtes en width: 50% avec le moindre padding ne tiennent plus côte à côte. Avec box-sizing: border-box, la largeur inclut le padding et la bordure, et la zone de contenu rétrécit pour leur faire de la place. Beaucoup de feuilles de style commencent par l'appliquer à tous les éléments avec *, *::before, *::after { box-sizing: border-box; }.

Boîtes de bloc et boîtes en ligne

Les boîtes se comportent différemment selon leur valeur de display. Les boîtes de bloc, comme p, h1 et section, commencent sur une nouvelle ligne et s'étirent sur toute la largeur de leur conteneur. Les boîtes en ligne, comme a, strong et span, se placent dans une ligne de texte ; width et height ne s'y appliquent pas, et leurs padding et marges verticaux n'écartent pas les autres lignes. display: inline-block est entre les deux : la boîte se place dans la ligne comme un mot mais respecte la largeur, la hauteur et le padding, ce qui convient aux petites étiquettes et aux boutons.

Les marges qui fusionnent

Une règle surprend presque tout le monde. Quand la marge basse d'un bloc rencontre la marge haute du suivant, elles ne s'additionnent pas : la plus grande l'emporte. Un paragraphe avec margin-bottom: 20px suivi d'un titre avec margin-top: 30px se retrouve à 30 pixels, et non à 50. On appelle cela la fusion des marges ; elle ne concerne que les marges verticales entre blocs dans le flux normal, pas à l'intérieur des conteneurs flex ou grid. Pour centrer un bloc horizontalement, donne-lui une width ou une max-width et margin: 0 auto : les deux marges latérales automatiques se partagent équitablement l'espace libre.