Partie 10 — Le modèle de boîte (Box Model) : margin, padding et border

Si vous avez déjà écrit du CSS, vous avez sûrement vécu cette situation : vous ajoutez une largeur à un élément, mais il devient plus grand que prévu, ou bien deux blocs refusent de s’aligner correctement.

Dans 90 % des cas, le problème vient d’une mauvaise compréhension du Box Model.

Le Box Model est la manière dont le navigateur voit chaque élément HTML : comme une boîte, avec des couches autour du contenu.

👉 Maîtriser le Box Model, c’est maîtriser la mise en page CSS.

1) Qu’est-ce que le Box Model ?

Chaque élément HTML est composé de quatre couches principales :

1. le contenu (content)
2. le padding
3. la border
4. la margin

Représentation logique :

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

Le navigateur calcule la taille finale d’un élément en additionnant toutes ces couches.

2) Le contenu (content)

Le contenu correspond à :

• le texte
• les images
• les éléments internes

Exemple :

.card {
  width: 300px;
  height: 150px;
}
  

Ici, width et height définissent uniquement la taille du contenu, pas le padding ni la border.

3) Le padding : l’espace intérieur

Le padding crée de l’espace entre le contenu et la bordure.

Exemple simple :

.card {
  padding: 20px;
}
  

Cela ajoute 20px d’espace à l’intérieur de la boîte.

Padding directionnel

.card {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
  

Version raccourcie :

.card {
  padding: 10px 20px;
}
  

4) La border : la limite de la boîte

La border entoure le padding et le contenu.

Exemple :

.card {
  border: 2px solid #333;
}
  

La border a :

• une épaisseur
• un style
• une couleur

Border arrondie

.card {
  border-radius: 12px;
}
  

5) La margin : l’espace extérieur

La margin crée de l’espace autour de l’élément, à l’extérieur de la bordure.

Exemple :

.card {
  margin: 20px;
}
  

Cela éloigne l’élément des autres.

Centrer un élément horizontalement

.container {
  width: 600px;
  margin: 0 auto;
}
  

6) Le margin collapsing (piège classique)

Les marges verticales peuvent fusionner.

Exemple :

p {
  margin-bottom: 20px;
}

h2 {
  margin-top: 30px;
}
  

Résultat : l’espace entre les deux n’est pas 50px mais 30px.

👉 Les marges verticales ne s’additionnent pas toujours.

7) box-sizing : contrôler le calcul des tailles

Par défaut, CSS utilise box-sizing: content-box.

Cela signifie :

width = contenu seulement
  

Solution moderne :

* {
  box-sizing: border-box;
}
  

Avec border-box, la largeur inclut padding et border.

✅ C’est une bonne pratique quasi universelle.

8) Exemple réel : carte de contenu (code uniquement)

<div class="card">
  <h3>Titre</h3>
  <p>Description de la carte</p>
</div>
  

.card {
  width: 300px;
  padding: 16px;
  border: 1px solid #ddd;
  margin: 20px auto;
  box-sizing: border-box;
}
  

9) Erreurs fréquentes avec le Box Model

• Oublier que padding et border augmentent la taille
• Utiliser margin pour tout
• Ne pas comprendre le margin collapsing
• Ignorer box-sizing

Vous comprenez maintenant parfaitement le Box Model : margin, padding, border et leur impact sur la taille et l’alignement des éléments.

Dans la Partie 11, nous allons explorer la typographie CSS : fonts, tailles, interlignes et lisibilité du texte.

✅ Le Box Model est la base de toute mise en page réussie.