CSS — Le Box Model

Le Box Model est sans doute le concept le plus important de toute la mise en page CSS. Mal compris, il est la source numéro un des problèmes d’espacement et de largeur (« pourquoi mon élément est-il plus large que prévu ? »). Bien compris, il rend la disposition prévisible. Prenons le temps qu’il faut.

Le Box Model CSS

Définition : Box Model

En CSS, chaque élément est représenté comme une boîte rectangulaire composée de quatre zones concentriques : content, padding, border et margin. C’est ce modèle qui détermine l’espace occupé par un élément et sa relation spatiale avec les éléments voisins.

Concrètement, chaque élément HTML est une boîte rectangulaire faite de quatre zones emboîtées, du cœur vers l’extérieur :

┌─────────────────────────────────────┐
│           MARGIN (extérieur)        │
│  ┌───────────────────────────────┐  │
│  │        BORDER (bordure)       │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │   PADDING (intérieur)   │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT       │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Les 4 zones du Box Model

Zone

Rôle

Propriété CSS

Content

Contenu de l’élément (texte, images)

width, height

Padding

Espace intérieur

padding

Border

Bordure de l’élément

border

Margin

Espace extérieur

margin

 
div {
    width: 200px;             /* Content */
    padding: 20px;            /* Espace intérieur */
    border: 5px solid black;  /* Bordure */
    margin: 10px;             /* Espace extérieur */
}

Voici le piège fondateur : par défaut, width et height ne mesurent que le content. La largeur réellement occupée par cet élément vaut donc width + padding × 2 + border × 2, soit 250px et non 200. C’est ce comportement par défaut, contre-intuitif, que nous corrigerons plus bas avec box-sizing.

Content — le contenu

div {
    width: 300px;
    height: 200px;
    min-width: 200px;   /* Largeur minimale */
    max-width: 500px;   /* Largeur maximale */
}

Le comportement par défaut dépend du type d’élément :

  • Un élément de bloc (<div>, <p>, <h1>…) occupe par défaut 100 % de la largeur de son parent.

  • Un élément en ligne (<span>, <a>, <strong>…) ne fait que la largeur de son contenu.

min-width et max-width (et leurs équivalents en hauteur) sont essentiels pour le responsive : ils permettent à un élément de s’adapter tout en restant dans des bornes raisonnables — par exemple « jamais plus large que 500px, jamais moins de 200 ».

Padding — l’espacement intérieur

Le padding pousse le contenu à l’écart de la bordure. Sa syntaxe accepte de une à quatre valeurs.

/* Tous les côtés identiques */
padding: 15px;

/* Vertical | Horizontal */
padding: 10px 20px;

/* Top | Horizontal | Bottom */
padding: 10px 20px 15px;

/* Top | Right | Bottom | Left (sens horaire) */
padding: 10px 20px 15px 25px;

/* Côté par côté */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

Astuce mnémotechnique (4 valeurs) : on tourne dans le sens horaire en partant du haut — Top, Right, Bottom, Left, soit « TRouBLe ».

Border — la bordure

/* Syntaxe complète : width style color */
border: 2px solid #333;

/* Styles de bordure courants */
border-style: solid;   /* Ligne continue */
border-style: dashed;  /* Tirets */
border-style: dotted;  /* Pointillés */
border-style: double;  /* Double ligne */

/* Bordures différentes par côté */
border-top: 3px solid red;
border-bottom: 1px dashed blue;

/* Coins arrondis */
border-radius: 10px;
border-radius: 50%; /* Cercle parfait (sur un carré) */

border-radius mérite une mention : appliqué à 50% sur un élément carré, il produit un cercle parfait — une technique courante pour les avatars et les pastilles.

Margin — l’espacement extérieur

La marge éloigne l’élément de ses voisins. Sa syntaxe est identique à celle du padding.

margin: 20px;
margin: 10px 20px;
margin: 10px 15px 20px 25px;

/* Centrer horizontalement un élément de bloc */
margin: 0 auto;

/* Marges négatives (usage avancé) */
margin-top: -10px;  /* Rapproche de l'élément au-dessus */

Deux valeurs spéciales sont à connaître. La valeur auto, combinée à une largeur définie, centre horizontalement un élément de bloc — c’est l’idiome classique margin: 0 auto pour centrer un conteneur. Les valeurs négatives, plus rares, servent à superposer ou rapprocher des éléments.

Fusion des marges verticales

Voici un comportement qui surprend systématiquement : les marges verticales adjacentes ne s’additionnent pas, elles fusionnent.

<p style="margin-bottom: 30px;">Paragraphe 1</p>
<p style="margin-top: 20px;">Paragraphe 2</p>

On pourrait attendre 50px d’écart ; il n’y en a que 30px. La règle est simple : c’est la plus grande des deux marges qui l’emporte, pas leur somme.

À retenir : cette fusion ne concerne que les marges verticales. Les marges horizontales, elles, ne fusionnent jamais et s’additionnent normalement.

box-sizing — maîtriser le calcul de la largeur

Revenons au piège du début. Par défaut, padding et bordure s’ajoutent à la largeur déclarée :

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Largeur totale réelle = 200 + 40 + 10 = 250px */
}

La solution tient en une propriété : box-sizing: border-box. Elle demande à inclure padding et bordure dans la largeur déclarée.

* {
    box-sizing: border-box;
}

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Largeur totale réelle = 200px (padding et bordure INCLUS) */
}

Avec border-box, width: 200px signifie enfin « 200px à l’écran », quoi qu’on mette en padding ou en bordure. Le calcul redevient intuitif.

Méthode : Activer border-box partout

Placez box-sizing: border-box sur le sélecteur universel * tout au début de votre feuille de styles. C’est l’une des toutes premières lignes de la quasi-totalité des projets CSS modernes : elle rend les dimensions prévisibles et vous épargne d’innombrables surprises de mise en page.

Visualiser le Box Model

Inutile de deviner : les outils de développement du navigateur affichent les quatre zones, chacune dans sa couleur. Ouvrez-les avec F12, puis l’onglet Éléments et le panneau Computed (ou « Styles »).

┌─────────────────────┐
│   margin: 10        │
│  ┌───────────────┐  │
│  │ border: 5     │  │
│  │ ┌───────────┐ │  │
│  │ │ padding:  │ │  │
│  │ │    20     │ │  │
│  │ │ ┌───────┐ │ │  │
│  │ │ │ 200×  │ │ │  │
│  │ │ │ 150px │ │ │  │
│  │ │ └───────┘ │ │  │
│  │ └───────────┘ │  │
│  └───────────────┘  │
└─────────────────────┘

Les zones y sont colorées de façon conventionnelle : margin en orange/jaune clair, border en jaune, padding en vert, content en bleu. Prenez l’habitude d’ouvrir les DevTools dès qu’un espacement vous semble incompréhensible — c’est le réflexe de débogage le plus rentable du CSS.