Comprendre le modèle boîte en CSS (box model)

Le modèle boîte est un concept fondamental en CSS. Cet article explique visuellement et simplement comment fonctionnent le contenu, le padding, les bordures et les marges.

I. Qu’est-ce que le modèle boîte en CSS ?  

En CSS, chaque élément HTML est considéré comme une boîte rectangulaire. C’est ce qu’on appelle le box model (ou modèle de boîte).

Ce modèle définit comment la taille d’un élément est calculée, et comment il interagit avec les autres éléments autour de lui.

Un élément HTML est constitué de 4 zones principales :

+-------------------------------+
|         margin (extérieur)   |
|  +-------------------------+  |
|  |     border (bordure)    |  |
|  |  +-------------------+  |  |
|  |  |  padding (espace) |  |  |
|  |  | +---------------+ |  |  |
|  |  | |  content      | |  |  |
|  |  | +---------------+ |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

II. Les 4 parties du modèle boîte  

1. content  

C’est le contenu réel de l’élément (texte, image, bouton…).

2. padding  

C’est l’espace intérieur entre le contenu et la bordure.

Exemple :

padding: 20px;

Crée un espace de 20 pixels à l’intérieur de l’élément, autour du contenu.

3. border  

C’est la bordure autour de l’élément. Elle peut avoir une couleur, une épaisseur et un style.

Exemple :

border: 2px solid black;

4. margin  

C’est l’espace extérieur entre l’élément et les autres éléments autour.

Exemple :

margin: 10px;

Ajoute 10 pixels d’espace entre cette boîte et les éléments voisins.

III. Calcul de la taille d’un élément  

Par défaut (avec box-sizing: content-box), la taille totale d’un élément est :

largeur totale = content + padding gauche/droite + border gauche/droite
hauteur totale = content + padding haut/bas + border haut/bas

⚠️ Les marges ne sont pas incluses dans la taille totale de l’élément.

IV. box-sizing: border-box (la bonne pratique)  

La plupart des développeurs préfèrent utiliser :

* {
  box-sizing: border-box;
}

Cela inclut le padding et les bordures dans la taille de l’élément, ce qui simplifie les calculs.

Exemple pratique :  

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box;
}

Dans ce cas, l’élément entier fera 200px de large, et non 200px + 2x20px + 2x2px.

V. Astuces à retenir  

• Le padding repousse le contenu vers l’intérieur.
• La marge (margin) repousse l’élément vers l’extérieur.
• box-sizing: border-box est plus intuitif pour contrôler la taille.
• Utilise outline: si tu veux un contour qui n’affecte pas la taille de l’élément.

VI. À tester dans un navigateur  

Voici un exemple HTML+CSS à tester :

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
    box-sizing: border-box;
    background-color: lightblue;
  }
</style>

<div class="box">
  Je suis une boîte CSS !
</div>

Outils pratiques en ligne JSFiddle - pour créer des démos interactives HTML/CSS/JS

VII. 🔗 Ressource utile  

• MDN Web Docs – box-sizing
• JSFiddle - pour créer des démos interactives HTML/CSS/JS
• w3 Schools – exercices

VIII. Conclusion  

Comprendre le modèle boîte en CSS est fondamental pour bien maîtriser la mise en page. En le visualisant comme un empilement de couches (contenu → padding → bordure → marge), tu peux mieux contrôler l’espacement, l’alignement et le rendu de tes éléments HTML.