Le box model et l'affichage

Objectifs

À la fin de cette leçon, vous saurez :

• décomposer chaque élément en contenu + padding + border + margin, et le voir dans DevTools ;
• prédire la largeur réelle d'une boîte — puis la rendre honnête avec box-sizing ;
• contrôler le flux avec display (block, inline, inline-block) ;
• reconnaître la fusion des marges verticales sans la confondre avec un bug.

🔗 Pour vous rafraîchir la mémoire : sélecteurs, cascade et spécificité

Chaque élément est une boîte à quatre couches

CSS considère tout élément comme une boîte rectangulaire composée de quatre zones concentriques :

┌─────────────────── margin ───────────────────┐   espace EXTÉRIEUR :
│  ┌──────────────── border ────────────────┐  │   distance aux AUTRES boîtes
│  │   ┌──────────── padding ───────────┐   │  │   espace INTÉRIEUR :
│  │   │        contenu                 │   │  │   coussin autour du contenu
│  │   └────────────────────────────────┘   │  │   bordure tracée
│  └────────────────────────────────────────┘  │
└───────────────────────────────────────────────┘

.encadre {
  padding: 16px;          /* coussin intérieur (transparent) */
  border: 1px solid #999; /* bordure visible */
  margin: 24px;           /* respiration extérieure */
}

Mnémonique : padding = rembourrage DANS la boîte ; margin = distance ENTRE les boîtes. La confusion des deux est le premier bug CSS de tout débutant : un fond coloré révèle immédiatement la différence — le padding se colore, la marge non.

Le meilleur outil pédagogique existe déjà : DevTools → onglet Elements → défilez jusqu'au diagramme box model coloré (contenu en bleu, padding en vert, bordure en jaune, marge en orange), avec les valeurs réelles de CHAQUE côté. Sélectionnez différents éléments et lisez ce schéma : il dit tout.

Le piège de la largeur : width ne mesure pas ce que vous croyez

Par défaut (content-box), width ne dimensionne que le CONTENU. Padding et bordure s'ajoutent au-delà :

.carte {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}
/* largeur RÉELLE sur l'écran : 300 + 20×2 + 5×2 = 350px ! */

Deux cartes « width: 300px » côte à côte dans un conteneur de 600px débordent mystérieusement... parce qu'elles mesurent en réalité 350 chacune. Toute mise en page calculée en pixels finit ainsi en cascade d'ajustements magiques.

La correction universelle — première ligne de presque toutes les feuilles de style modernes :

* {
  box-sizing: border-box;
}

Désormais width inclut padding et bordure : width: 300px signifie « la boîte COMPLÈTE fait 300px ». Vos largeurs redeviennent honnêtes et vos calculs triviaux. Adoptez-la systématiquement dès aujourd'hui.

Block, inline, inline-block : trois comportements de flux

display	Occupe	Accepte width/padding verticaux ?	Exemples natifs
block	toute la largeur disponible	oui	div, p, h1, ul, section
inline	juste sa place dans le texte	non (padding vertical invisible)	a, span, strong, em
inline-block	sa place dans le texte	oui	aucun natif — c'est vous qui le choisissez

block :                    inline :
┌─────────────────────┐    texte texte [lien] texte texte
├─────────────────────┤              [autre lien] texte
│ bloc suivant        │    (coule dans la ligne)
└─────────────────────┘

Le cas d'école du inline-block : transformer un lien en bouton. Un <a> inline ignore poliment le padding vertical (le clic reste minuscule) ; passer en inline-block lui donne un corps :

a.bouton {
  display: inline-block;   /* reste DANS le texte MAIS devient dimensionnable */
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  border-radius: 6px;
}

Notez que display ne change ni le HTML ni le sens : c'est une décision de PRÉSENTATION — exactement ce que le CSS a le droit de décider.

La fusion des marges : quand deux marges n'en font qu'une

Phénomène surprenant : deux marges verticales ADJACENTES ne s'additionnent pas — la plus grande gagne :

h2 { margin-bottom: 30px; }
p  { margin-top: 20px; }
/* espace réel entre les deux : 30px, PAS 50px */

C'est le margin collapsing, comportement normal et voulu (il évite les doubles espacements entre paragraphes successifs). Ne perdez jamais vingt minutes à « corriger » ce qui fonctionne comme conçu : si votre espacement semble trop petit, vérifiez d'abord quelle marge gagne.

Exercice

1. Sur votre CV, donnez au header un padding de 24px et une bordure ; observez la différence padding/margin dans le diagramme DevTools.
2. Activez box-sizing: border-box global, puis créez deux cartes de width: 300px avec padding et bordure, côte à côte : vérifiez qu'elles tiennent dans 600px.
3. Transformez les liens du footer en boutons via inline-block, padding et fond coloré.
4. Provoquez la fusion des marges : h2 avec margin-bottom: 40px suivi d'un p avec margin-top: 10px. Mesurez l'espace réel dans DevTools.

Résumé

• Boîte = contenu + padding + border + margin ; le diagramme DevTools la rend visible.
• Sans box-sizing: border-box, width ne compte que le contenu : débordements garantis.
• block empile, inline coule ; inline-block = lien-bouton.
• Marges verticales adjacentes fusionnent (la plus grande gagne) : comportement, pas bug.