Le Box Model

1. Comprendre le Box Model

Le Box Model est le concept fondamental de CSS. Il définit comment chaque élément est rendu sur la page et comment il interagit avec les éléments voisins. Sans comprendre le Box Model, il est impossible de créer des mises en page correctes.

Chaque élément HTML génère une boîte rectangulaire qui se compose de 4 zones, de l'intérieur vers l'extérieur :

2. Syntaxe détaillée

2.1 Le modèle de boîte — Vue d'ensemble

Dimensions du conteneur : width / height

/* Toutes les unités sont acceptées */
.boite {
  width: 300px;
  height: 200px;
}

/* Pourcentages — relatif au parent */
.boite {
  width: 50%;
  height: 100vh;
}

/* Auto — le navigateur calcule */
.boite {
  width: auto;     /* Défaut — prend toute la largeur disponible */
  height: auto;    /* Défaut — s'adapte au contenu */
}

/* Valeurs spéciales */
.boite {
  width: fit-content;    /* Taille du contenu */
  width: min-content;    /* Taille minimale du contenu */
  width: max-content;    /* Taille maximale du contenu */
}

min-width / max-width / min-height / max-height

.boite-responsive {
  width: 100%;
  min-width: 320px;    /* Jamais plus étroit que 320px */
  max-width: 1200px;   /* Jamais plus large que 1200px */
  min-height: 200px;   /* Hauteur minimale garantie */
  max-height: 80vh;    /* Ne dépasse jamais 80% de la viewport */
}

/* Utilisation courante : conteneur centré */
.conteneur {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

aspect-ratio — Ratio d'aspect moderne

/* Ratio 16:9 — vidéo YouTube */
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Carré parfait */
.avatar {
  width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

/* Ratio 4:3 */
.image {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Ancienne méthode (à éviter) — padding-top hack */
.ancien {
  width: 100%;
  padding-top: 56.25%; /* 9/16 × 100% */
  position: relative;
}
.nouveau {
  width: 100%;
  aspect-ratio: 16 / 9; /* Simple et lisible */
}

2.2 box-sizing — La propriété la plus importante

/* Valeur par défaut : content-box */
.boite-defaut {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #000;
  /* Largeur totale = 300 + 20×2 + 5×2 = 350px ! */
}

/* Valeur recommandée : border-box */
.boite-recommandee {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #000;
  /* Largeur totale = 300px (le padding et border sont inclus) */
}

┌─ MARGIN (20px) ────────────────────────────────────┐
│  ┌─ BORDER (5px) ───────────────────────────────┐  │
│  │  ┌─ PADDING (20px) ────────────────────────┐  │  │
│  │  │                                         │  │  │
│  │  │   width: 300px (CONTENT)                │  │  │
│  │  │                                         │  │  │
│  │  └─────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

  content-box : width = contenu seul (300px)
  border-box  : width = contenu + padding + border (300px total)

*, *::before, *::after {
  box-sizing: border-box;
}

2.3 Margin — L'espace extérieur

Shorthand margin

/* 1 valeur : toutes les côtés */
.boite { margin: 20px; }

/* 2 valeurs : haut/bas — gauche/droite */
.boite { margin: 10px 20px; }

/* 3 valeurs : haut — gauche/droite — bas */
.boite { margin: 10px 20px 30px; }

/* 4 valeurs : haut — droite — bas — gauche (sens horaire) */
.boite { margin: 10px 20px 30px 40px; }

/* Côtés individuels */
.boite {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

/* Auto — centrage horizontal */
.boite-centree {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  /* Ou raccourci : */
  margin: 0 auto;
}

margin: 10px 20px 30px 40px;
          │    │    │    │
          │    │    │    └── gauche (40px)
          │    │    └─── bas (30px)
          │    └──── droite (20px)
          └───── haut (10px)

         ┌─ 10px ─┐
    ┌────┼────────┼────┐
40px│    │  BOÎTE │    │20px
    │    │        │    │
    └────┼────────┼────┘
         └─ 30px ─┘

Marge négative

/* Reculer un élément vers la gauche */
.decale {
  margin-left: -20px;
}

/* Faire chevaucher deux éléments */
.chevauchement {
  margin-top: -30px;  /* Remonte l'élément */
}

/* Déborder du conteneur */
.bande-pleine-largeur {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

Margin collapsing — Le piège n°1

/* Règle : les marges verticales adjacentes fusionnent */
.block-1 {
  margin-bottom: 30px;
}
.block-2 {
  margin-top: 20px;
}
/* Espace réel entre les deux : 30px (pas 50px !) */

/* Résultat visuel :
   ┌─ Block 1 ─┐
   │            │
   └────────────┘
   ↕ 30px (pas 50px)
   ┌─ Block 2 ─┐
   │            │
   └────────────┘
*/

MARGIN COLLAPSING — Les marges verticales fusionnent
═══════════════════════════════════════════════════════

  Sans collapsing (ce qu'on pourrait attendre) :
  ┌──────────┐
  │  Block 1 │
  └──────────┘
  ↕ 30px (margin-bottom de Block 1)
  ↕ 20px (margin-top de Block 2)
  ┌──────────┐
  │  Block 2 │
  └──────────┘

  Avec collapsing (ce qui se passe réellement) :
  ┌──────────┐
  │  Block 1 │
  └──────────┘
  ↕ 30px (max(30px, 20px) = 30px)
  ┌──────────┐
  │  Block 2 │
  └──────────┘

  La marge résultante = max(margin-bottom, margin-top)

2.4 Padding — L'espace intérieur

/* Shorthand identique à margin */
.boite { padding: 20px; }             /* Toutes les côtés */
.boite { padding: 10px 20px; }       /* Haut/bas — gauche/droite */
.boite { padding: 10px 20px 30px; }  /* Haut — gauche/droite — bas */
.boite { padding: 10px 20px 30px 40px; } /* Haut — droite — bas — gauche */

/* Côtés individuels */
.boite {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

2.5 Border — La bordure

/* Propriétés individuelles */
.boite {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* Shorthand */
.boite {
  border: 2px solid #333;
}

/* Bordures individuelles */
.boite {
  border-top: 3px solid red;
  border-right: 1px dashed blue;
  border-bottom: 3px solid red;
  border-left: 1px dashed blue;
}

/* Bordures arrondies */
.boite {
  border-radius: 8px;              /* Tous les coins */
  border-radius: 8px 0;           /* Coins horizontaux / coins verticaux */
  border-radius: 8px 0 8px 0;     /* Haut-gauche — haut-droit — bas-droit — bas-gauche */
  border-radius: 50%;             /* Cercle/ellipse */
}

border-collapse — Pour les tableaux

table {
  border-collapse: collapse;  /* Bordures fusionnées */
  /* OU */
  border-collapse: separate;  /* Bordures séparées (défaut) */
  border-spacing: 8px;       /* Espacement entre cellules */
}

2.6 Overflow — Gestion du dépassement

.boite { overflow: visible; }   /* Défaut — le contenu déborde */
.boite { overflow: hidden; }    /* Le contenu est coupé */
.boite { overflow: scroll; }    /* Barres de défilement toujours visibles */
.boite { overflow: auto; }      /* Barres de défilement si nécessaire */

/* Directionnel */
.boite { overflow-x: hidden; }  /* Coupé horizontalement */
.boite { overflow-y: scroll; }  /* Défilement vertical */

/* Nouvelles valeurs modernes */
.boite { overflow: clip; }      /* Comme hidden mais sans scroll */
.boite { overflow: clip; }      /* Plus performant que hidden */

2.7 Outline — Contour externe

.boite:focus {
  outline: 3px solid #2563eb;
  outline-offset: 4px;  /* Espace entre la bordure et le contour */
}

/* Supprimer le focus ring (à éviter pour l'accessibilité !) */
.boite:focus { outline: none; }

/* Remplacement moderne et accessible */
.boite:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

3. Visualisation

3.1 Diagramme complet du Box Model

┌─────────────────── MARGIN ───────────────────────────┐
│  (transparente — espace entre les éléments)          │
│                                                      │
│  ┌────────────── BORDER ──────────────────────────┐  │
│  │  (ligne visible — border-width, border-style)  │  │
│  │                                                 │  │
│  │  ┌────────── PADDING ───────────────────────┐  │  │
│  │  │  (espace intérieur — couleur de fond)    │  │  │
│  │  │                                          │  │  │
│  │  │  ┌──────── CONTENT ───────────────────┐  │  │  │
│  │  │  │                                    │  │  │  │
│  │  │  │  Le texte, l'image, le contenu     │  │  │  │
│  │  │  │                                    │  │  │  │
│  │  │  │  width × height                    │  │  │  │
│  │  │  │                                    │  │  │  │
│  │  │  └────────────────────────────────────┘  │  │  │
│  │  │                                          │  │  │
│  │  └──────────────────────────────────────────┘  │  │
│  │                                                 │  │
│  └─────────────────────────────────────────────────┘  │
│                                                      │
└──────────────────────────────────────────────────────┘

width  = content-width + padding-left + padding-right + border-left + border-right
height = content-height + padding-top + padding-bottom + border-top + border-bottom

3.2 Box-sizing comparison

content-box (défaut) :
═══════════════════════
  ┌─ padding ─┐
  │  ┌──────┐ │
  │  │conten│ │  ← width: 200px (contenu seul)
  │  │  u   │ │     + padding: 20px × 2
  │  └──────┘ │     + border: 5px × 2
  └───────────┘     = 250px TOTAL

border-box (recommandé) :
══════════════════════════
  ┌─ padding ─┐
  │  ┌──────┐ │
  │  │conten│ │  ← width: 200px (tout inclus !)
  │  │  u   │ │     padding et border sont
  │  └──────┘ │     DÉDUITS du width
  └───────────┘     = 200px TOTAL

3.3 Margin collapsing — Cas visuels

CAS 1 : Deux blocs adjacents
─────────────────────────────
  ┌──────────┐
  │  Bloc 1  │  margin-bottom: 30px
  └──────────┘
      ↕ 30px  ← max(30, 20) = 30px
  ┌──────────┐
  │  Bloc 2  │  margin-top: 20px
  └──────────┘

CAS 2 : Parent + premier enfant
─────────────────────────────────
  ┌─── Parent (sans padding) ────┐
  │  ↕ 20px ← "s'échappe"       │
  │  ┌── Enfant 1 ──┐           │
  │  │               │ margin-top: 20px
  │  └───────────────┘           │
  │  ┌── Enfant 2 ──┐           │
  │  │               │           │
  │  └───────────────┘           │
  └──────────────────────────────┘

CAS 3 : Parent AVEC padding ou border
──────────────────────────────────────
  ┌─── Parent (border ou padding) ─┐
  │                                 │
  │  ↕ 20px ← ne s'échappe PAS    │
  │  ┌── Enfant 1 ──┐             │
  │  │               │ margin-top: 20px
  │  └───────────────┘             │
  │  ┌── Enfant 2 ──┐             │
  │  │               │             │
  │  └───────────────┘             │
  └────────────────────────────────┘

4. Exemples progressifs

4.1 Le reset CSS universel

/* Reset moderne — utilise border-box sur tout */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Supprime les marges par défaut des éléments de liste */
ul, ol {
  list-style: none;
}

/* Empêche les images de déborder */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Empêche le texte de déborder */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

4.2 Techniques de centrage

/* Méthode 1 : margin auto (l'élément a une width) */
.centree-1 {
  width: 300px;
  margin: 0 auto;
}

/* Méthode 2 : margin auto + Flexbox (le conteneur est flex) */
.centree-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Méthode 3 : margin auto dans un Grid */
.centree-3 {
  display: grid;
  place-items: center;
}

/* Méthode 4 : transform (absolu + décalage) */
.centree-4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Méthode 5 : padding (quand on veut de l'espace) */
.centree-5 {
  width: fit-content;
  margin: 0 auto;
  padding: 2rem;
}

4.3 Carte avec padding et border

.carte {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s, transform 0.2s;
}

.carte:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.carte__titre {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;  /* Espace sous le titre */
}

.carte__texte {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1rem;     /* Espace avant le bouton */
}

.carte__bouton {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: white;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

4.4 Layout responsive avec box-sizing

/* Avec border-box, les pourcentages fonctionnent parfaitement */
.conteneur {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.layout {
  display: flex;
  gap: 2rem;     /* Pas de margin collapsing avec gap ! */
}

.sidebar {
  flex: 0 0 250px;  /* Largeur fixe */
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.contenu {
  flex: 1;           /* Prend le reste */
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* Sur mobile, passer en colonnes */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    flex: none;
  }
}

4.5 Espacement harmonieux avec gap

/* AVANT — Avec margin (risque de collapsing) */
.liste-item {
  margin-bottom: 1rem;
}
.liste-item:last-child {
  margin-bottom: 0;  /* Supprimer la marge du dernier */
}

/* APRÈCES — Avec gap (pas de collapsing !) */
.liste {
  display: flex;
  flex-direction: column;
  gap: 1rem;  /* Espacement uniforme, pas de last-child */
}

/* Grid avec gap */
.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;  /* Gap horizontal ET vertical */
}

/* gap fonctionne aussi avec flexbox */
.flex-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

5. Erreurs fréquentes

/* FAUX — width ne correspond pas à la taille visible */
.boite {
  width: 300px;
  padding: 20px;
  border: 5px solid #000;
  /* Total visible = 350px, pas 300px ! */
}

/* CORRECT — border-box en premier */
*, *::before, *::after {
  box-sizing: border-box;
}
.boite {
  width: 300px;
  padding: 20px;
  border: 5px solid #000;
  /* Total visible = 300px ✓ */
}

/* FAUX — margin: auto ne centre que horizontalement */
.boite {
  margin: 0 auto;  /* Centre gauche/droite ✓ */
  margin: auto 0;  /* NE centre PAS haut/bas ✗ */
}

/* CORRECT — pour centrer verticalement */
.boite {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* OU */
.boite {
  display: grid;
  place-items: center;
}

/* FAUX — penser que margin ajoute de la couleur de fond */
.boite {
  margin: 20px;
  background: blue;  /* Le margin reste transparent ! */
}

/* CORRECT — utiliser padding pour l'espacement avec fond */
.boite {
  padding: 20px;     /* Le padding prend la couleur de fond */
  background: blue;
}

/* FAUX — les marges horizontales fonctionnent, pas les verticales */
span {
  margin-top: 20px;   /* Ignoré ! */
  margin-bottom: 20px; /* Ignoré ! */
  margin-left: 20px;   /* Fonctionne */
}

/* CORRECT — convertir en inline-block ou block */
span {
  display: inline-block;
  margin: 20px;
}

/* FAUX — un bloc prend 100% par défaut, pas la taille du contenu */
div { background: blue; }
/* Le div fait toute la largeur du parent */

/* CORRECT — spécifier une width ou utiliser fit-content */
div {
  width: fit-content;  /* S'adapte au contenu */
  background: blue;
}

/* FAUX — le padding AJOUTE à la largeur */
.boite-content {
  box-sizing: content-box;  /* Défaut */
  width: 100%;
  padding: 20px;
  /* Total = 100% + 40px → déborde ! */
}

/* CORRECT — utiliser border-box ou max-width */
.boite-border {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  /* Total = 100% → parfait */
}

/* FAUX — les espaces ne sont pas ce qu'on attend */
.parent {
  background: #f1f5f9;
}
.enfant-1 { margin-bottom: 30px; }
.enfant-2 { margin-top: 20px; }
/* Espace entre les enfants : 30px, pas 50px ! */

/* CORRECT — utiliser gap ou un formatting context */
.parent {
  display: flex;
  flex-direction: column;
  gap: 20px;  /* Espacement exact et prévisible */
}

/* FAUX — les marges négatives cassent le layout */
.decalage {
  margin-top: -50px;  /* Remonte l'élément, chevauche le précédent */
  margin-left: -20px; /* Sort du conteneur */
}
/* Les résultats sont souvent imprévisibles et cassent le responsive */

/* CORRECT — utiliser les outils modernes à la place */
.decalage {
  transform: translateY(-10px);  /* Décalage visuel sans casser le layout */
}

6. Bonnes pratiques

7. Mini-défi

/* content-box : 300 + 25×2 + 3×2 = 356px */
.content-box-demo {
  box-sizing: content-box;
  width: 300px;
  padding: 25px;
  border: 3px solid #333;
}

/* border-box : 300px total */
.border-box-demo {
  box-sizing: border-box;
  width: 300px;
  padding: 25px;
  border: 3px solid #333;
}

.bloc-1 { margin-bottom: 30px; }
.bloc-2 { margin-top: 20px; }

/* Le margin collapsing fusionne les marges verticales */
/* La marge résultante = max(30, 20) = 30px */

/* Solution 1 : Utiliser gap */
.parent {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Solution 2 : Utiliser padding sur le parent */
.parent {
  padding-top: 20px;
}
.bloc-1 { margin-bottom: 30px; }
.bloc-2 { margin-top: 0; }

/* Solution 3 : overflow: auto sur le parent */
.parent {
  overflow: auto;
}

/* Méthode 1 : Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Méthode 2 : Grid */
.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}

/* Méthode 3 : Margin auto + padding */
.parent {
  display: flex;
  height: 100vh;
}
.enfant {
  width: 200px;
  height: 200px;
  margin: auto;
}

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1e293b;
  display: grid;
  place-items: center;
  color: white;
  border-radius: 8px;
}

.carte {
  width: fit-content;
  padding: 1.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
}

.carte h3 {
  margin-bottom: 0.5rem;
}

.carte p {
  line-height: 1.6;
}

.carte button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.texte-scroll {
  width: 300px;
  height: 150px;
  padding: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #ccc;
}

8. Projet d'application

9. Révision