Démo du modèle de boîte (Box Model)

1) Même valeurs, résultat différent : content-box vs border-box

content-box (par défaut)

Ici, width = contenu seulement.
Le padding + border s’ajoutent ➜ la boîte devient plus large.

width: 240px

border-box

Ici, width = taille totale (contenu + padding + border).
La boîte reste à la largeur prévue.

width: 240px

2) Margin : espace extérieur

Boîte A

J’ai une marge en bas (margin-bottom).

Boîte B

La marge crée de l’espace entre A et B.