📘 Module 4 — CSS

« La scène du crime : comprendre l’espace entre les éléments »

Chaque élément a laissé des traces. Des marges. Des bordures. Du vide. Si tu ne comprends pas l’espace… la mise en page te mentira.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

• Comprendre le Box Model CSS et ses différentes zones
• Maîtriser padding, border et margin
• Choisir intelligemment entre content-box et border-box
• Gérer le débordement du contenu
• Comprendre le comportement des boîtes (display)
• Centrer des éléments correctement
• Éviter les pièges classiques comme le margin collapsing

🕵️ Chapitre 4 — Le Box Model

En CSS, tout est une boîte. Texte, image, bouton, section… Chaque élément HTML est interprété comme une boîte rectangulaire.

Comprendre le Box Model, c’est comprendre :

• pourquoi un élément est trop grand
• pourquoi il déborde
• pourquoi il ne s’aligne pas comme prévu

🧱 4.1 — Content, padding, border, margin

Les couches de la scène

+------------------------------+
|            margin            |
|  +------------------------+  |
|  |          border        |  |
|  |  +------------------+  |  |
|  |  |      padding     |  |  |
|  |  |  +-------------+ |  |  |
|  |  |  |   content   | |  |  |
|  |  |  +-------------+ |  |  |
|  |  +------------------+  |  |
|  +------------------------+  |
+------------------------------+

▶ Content — La preuve principale

Zone où se trouve :

• le texte
• les images
• les vidéos

C’est le cœur de la boîte.

▶ Padding — L’espace de sécurité

Espace entre le contenu et la bordure.

padding: 20px;

➡️ Le padding fait partie visuellement de l’élément ➡️ Il prend la couleur de fond

▶ Border — La limite officielle

La bordure entoure le padding et le contenu.

border: 2px solid black;

➡️ Peut avoir une largeur, un style et une couleur ➡️ Compte dans la taille totale selon le box-sizing

▶ Margin — La distance avec les autres

Espace extérieur à la boîte.

margin: 20px;

➡️ Ne prend jamais la couleur de fond ➡️ Sert à espacer les éléments entre eux

📐 4.2 — box-sizing : comment CSS calcule les tailles

Une affaire de calculs

✔ content-box — Valeur par défaut

box-sizing: content-box;

• width = contenu uniquement
• padding + border s’ajoutent en plus

width: 200px;
padding: 20px;
border: 2px solid;

➡️ Largeur réelle = 244px

❌ Peut vite devenir imprévisible

✔ border-box — La méthode propre ✅

box-sizing: border-box;

• width inclut contenu + padding + border
• La boîte fait exactement la taille demandée

➡️ Plus simple ➡️ Plus moderne ➡️ Utilisé partout (Bootstrap, Tailwind, etc.)

🔧 Bon réflexe : l’appliquer globalement

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

👉 Inclut aussi les pseudo-éléments 👉 Évite 90% des bugs de layout

🌊 4.3 — Overflow, visibility, display

Quand ça déborde ou disparaît

▶ overflow — gérer le débordement

overflow: visible; /* par défaut */
overflow: hidden;
overflow: scroll;
overflow: auto;

➡️ Très utilisé pour :

• contenir des images
• créer des zones scrollables
• masquer des débordements

▶ visibility — invisible mais présent

visibility: hidden;

• L’élément disparaît visuellement
• Son espace est conservé

⚠️ À ne pas confondre avec :

display: none;

➡️ display: none retire totalement l’élément du flux

▶ display — le comportement de la boîte

div {
  display: block;
}

span {
  display: inline;
}

📏 4.4 — Gestion de l’espace et centrage

Aligner les preuves

▶ Marges classiques

margin: 10px 20px;

▶ Centrage horizontal avec auto

div {
  width: 400px;
  margin: 0 auto;
}

➡️ Fonctionne uniquement sur les éléments block

▶ Centrage moderne (recommandé)

Avec Flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Avec Grid

.parent {
  display: grid;
  place-items: center;
}

▶ Margin collapsing — Le piège classique

p {
  margin: 20px 0;
}

Deux paragraphes consécutifs ➡️ 20px, pas 40px

📌 Règles :

• uniquement vertical
• uniquement entre éléments block
• padding, border ou overflow empêchent l’effet

🗂️ Conclusion — Maîtriser l’espace, c’est maîtriser la mise en page

Le Box Model n’est pas optionnel. C’est la base physique du CSS.

Si tu comprends l’espace, tu contrôles l’interface. Sinon… le layout te contrôle.