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 ;
• contrôler le flux avec display (block, inline, flex…) ;
• dimensionner proprement avec box-sizing.

Chaque élément est une boîte

┌─────────────────── margin ───────────────────┐
│  ┌──────────────── border ────────────────┐  │
│  │   ┌──────────── padding ───────────┐   │  │
│  │   │        contenu                 │   │  │
│  │   └────────────────────────────────┘   │  │
│  └────────────────────────────────────────┘  │
└───────────────────────────────────────────────┘

.encadre {
  padding: 16px;       /* espace INTÉRIEUR */
  border: 1px solid #999;
  margin: 24px;        /* espace EXTÉRIEUR, entre boîtes */
}

Règle mnémotechnique : padding pousse le contenu depuis la bordure ; margin éloigne les boîtes entre elles.

Le piège de la largeur

Par défaut, width ne mesure que le contenu : ajouter padding et border agrandit la boîte au-delà de vos calculs. La correction universelle :

* {
  box-sizing: border-box;
}

Désormais width: 300px signifie « la boîte complète fait 300px », padding et bordures incluses. Cette ligne ouvre quasiment toutes les feuilles de style modernes.

Block et inline

Deux comportements de flux fondamentaux :

a.bouton {
  display: inline-block;   /* reste dans le texte MAIS accepte padding/marges */
  padding: 8px 16px;
}

Un lien devient cliquable confortablement grâce à inline-block : ni bloc complet, ni inline limité.

Exercice

1. Sur votre CV, donnez au header un padding de 24px et une bordure ; observez la différence padding/margin.
2. Activez box-sizing: border-box global puis fixez des largeurs : vérifiez que rien ne déborde.
3. Transformez les liens du footer en boutons via inline-block, padding et fond coloré.

Résumé

• Boîte = contenu + padding + border + margin.
• box-sizing: border-box partout : vos largeurs deviennent honnêtes.
• block empile, inline coule ; inline-block combine.