Modèle de boîte en CSS : le rectangle invisible qui dessine chaque élément

Ouvrez les outils de développement de votre navigateur, cliquez sur n'importe quel élément d'une page, et un onglet appelé « Box Model » affichera quatre rectangles imbriqués. Ce n'est pas un détail d'outillage : c'est ainsi que CSS voit chaque élément, du plus petit bouton à la page entière. Un titre, une image, une carte de produit, tous sont, pour le moteur de rendu, un empilement de rectangles concentriques.

Comprendre ce modèle de boîte change la façon de lire une mise en page. Un élément qui déborde de son conteneur, une carte plus large que prévu, un bouton dont la zone cliquable ne correspond pas à ce qu'on voit : la cause se trouve presque toujours dans une des quatre couches de la boîte, mal comprise ou mal calculée.

Définition

Le modèle de boîte décrit les quatre zones concentriques qui composent chaque élément affiché par le navigateur : le contenu, le padding, la border et la margin. Ces quatre zones s'empilent toujours dans le même ordre, de l'intérieur vers l'extérieur, et chacune joue un rôle précis dans la taille finale et l'apparence visuelle de l'élément.

.carte {
  width: 240px;
  padding: 20px;
  border: 2px solid #1f2937;
  margin: 16px;
  background-color: #f9fafb;
}

Cette seule règle suffit à faire exister les quatre couches : 240 pixels de contenu, entourés de 20 pixels d'air avant d'atteindre un trait de 2 pixels, lui-même séparé des éléments voisins par 16 pixels de vide. Le fond gris clair s'arrête pile à la bordure : la marge, elle, reste toujours transparente, quelle que soit la couleur de fond définie.

Les quatre couches, une par une

Chaque couche se comporte différemment face au fond et à la bordure, ce qui explique la confusion fréquente entre padding et margin chez les débutants.

Cette distinction guide un réflexe utile en pratique : si un espace doit changer de couleur au survol d'un bouton ou porter une ombre, c'est du padding. S'il doit simplement écarter la boîte d'un élément voisin sans jamais rien afficher dedans, c'est de la marge.

Calculer la taille totale d'une boîte

Par défaut, la propriété width ne fixe que la largeur du contenu, pas celle de la boîte entière visible à l'écran. Pour connaître l'espace réellement occupé, il faut additionner le padding et la bordure des deux côtés.

.carte {
  width: 240px;
  padding: 20px;
  border: 2px solid #1f2937;
}

/* Largeur réellement occupée à l'écran :   240 + (20 * 2) + (2 * 2) = 284px */

Ce calcul surprend presque tout le monde au premier abord : une boîte annoncée à 240 pixels en occupe en réalité 284. C'est le comportement par défaut du navigateur, appelé content-box et détaillé dans box-sizing. La quasi-totalité des projets professionnels le modifient dès la première ligne de leur feuille de style, précisément pour ne plus avoir à faire ce calcul à la main.

Vérifier une boîte dans les outils de développement

Plutôt que de calculer à la main, ouvrez l'inspecteur de votre navigateur, sélectionnez un élément, puis cherchez l'onglet appelé Layout ou Computed selon les navigateurs. Un schéma affiche les quatre couches avec leurs valeurs exactes, y compris celles héritées d'une feuille de style que vous n'avez pas écrite vous-même, comme les styles par défaut du navigateur.

C'est le réflexe le plus rapide pour diagnostiquer un débordement inattendu : si un élément dépasse son conteneur d'exactement la largeur d'une bordure ou d'un padding, le modèle de boîte en est presque toujours la cause, bien avant qu'il faille chercher du côté de propriétés comme display ou overflow. Notre formation HTML et CSS passe systématiquement par cette étape d'inspection avant de corriger un bug de mise en page, pour habituer à lire le modèle de boîte plutôt qu'à deviner.

Questions fréquentes

Par défaut, non : width ne fixe que le contenu, le padding et la bordure s'ajoutent par-dessus cette valeur. C'est exactement ce comportement que la propriété box-sizing permet d'inverser, pour que padding et bordure soient inclus dans la largeur annoncée plutôt qu'ajoutés à elle.

Le fond s'étend jusqu'au bord extérieur de la bordure, jamais au-delà : la marge reste toujours transparente, quelle que soit la couleur de fond définie sur l'élément. Si un espace autour d'un élément doit porter une couleur, il faut le convertir en padding, jamais en margin.

Oui, mais leur effet vertical reste limité : la marge et le padding verticaux d'un élément en ligne n'écartent pas les lignes de texte voisines, contrairement à leurs équivalents horizontaux, pleinement actifs dans les deux sens. C'est une des raisons qui poussent à passer un élément en display: inline-block ou en display: block dès qu'un espacement vertical devient nécessaire.