Ajouter une bordure de deux pixels à un encart censé faire exactement 300 pixels de large, et le voir soudain déborder de son conteneur : cette surprise, classique chez les débutants, s’explique entièrement par la façon dont le navigateur additionne, ou non, les différentes couches qui composent chaque élément.
Quatre couches empilées
De l’intérieur vers l’extérieur : le contenu proprement dit, l’espacement interne (padding), la bordure (border), puis la marge externe (margin), qui sépare l’élément de ses voisins sans faire partie de sa propre boîte visible. Par défaut, la propriété width ne concerne que le contenu seul, ce qui oblige à additionner mentalement padding et bordure pour connaître la largeur totale réellement occupée.
Exemple : le correctif quasi universel
*, *::before, *::after {
box-sizing: border-box;
}
Bon à savoir
- La valeur
border-boxde la propriétébox-sizing, désormais appliquée par défaut dans la quasi-totalité des thèmes WordPress modernes, inclut padding et bordure dans la largeur déclarée, ce qui rend les calculs bien plus prévisibles. - Deux marges verticales adjacentes peuvent fusionner en une seule (la plus grande des deux), un comportement appelé fusion des marges, qui ne s’applique jamais aux marges horizontales.
- Un conteneur en
display: flexougriddésactive automatiquement la fusion des marges pour ses enfants directs, un détail qui explique certains écarts de comportement entre mises en page. - Les outils de développement des navigateurs affichent ce modèle sous forme de schéma coloré dans l’inspecteur, un moyen rapide de vérifier visuellement d’où vient un débordement inattendu.