# Modèle de boîte

> Représentation selon laquelle chaque élément HTML occupe un espace composé de son contenu, d'un espacement interne, d'une bordure et d'une marge externe.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/modele-de-boite/

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-box` de 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: flex` ou `grid` dé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.