📚 Qu'est-ce que le Box Model ?
Le Box Model (modèle de boîte) est un concept fondamental en CSS. Chaque élément HTML
est considéré comme une boîte rectangulaire composée de 4 zones : le contenu, le padding (remplissage
intérieur), la bordure et la marge.
Comprendre le Box Model est essentiel pour maîtriser la mise en page et l'espacement
des éléments.
1. Content (Contenu)
La zone où le contenu réel est affiché (texte, images, etc.).
.box {
width: 200px;
height: 100px;
}
📐 Propriétés :
• width : largeur
• height : hauteur
• min-width / max-width
• min-height / max-height
2. Padding (Remplissage)
Espace entre le contenu et la bordure (transparent).
.box {
padding: 20px;
}
/* Ou individuellement */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
Ce contenu a 20px de padding de tous les côtés
💡 Astuce : Le padding hérite de la couleur de fond de l'élément
3. Border (Bordure)
Contour visible autour du padding et du contenu.
.box {
border: 2px solid blue;
}
/* Ou séparément */
border-width: 2px;
border-style: solid;
border-color: blue;
Ce contenu a une bordure de 5px solid
4. Margin (Marge)
Espace extérieur, entre l'élément et les autres éléments (transparent).
.box {
margin: 30px;
}
/* Ou individuellement */
margin-top: 20px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 15px;
Ce contenu a 30px de marge de tous les côtés
⚠️ Note : Les marges peuvent "fusionner" (margin collapse)
Le problème du calcul de taille
Par défaut, width et height ne s'appliquent qu'au
contenu. Le padding et la bordure s'ajoutent à cette taille.
❌ Sans box-sizing (défaut)
width: 200px
+ padding: 20px × 2
+ border: 5px × 2
= 250px au total
✅ Avec box-sizing: border-box
width: 200px
(padding et border inclus)
= 200px au total
/* Recommandation : appliquer à tous les éléments */
* {
box-sizing: border-box;
}
✅ Avantage : Calculs plus prévisibles, mise en page plus simple
🌟 Recommandation : Toujours utiliser box-sizing: border-box dans vos projets !
display: block
Prend toute la largeur disponible, commence sur une nouvelle ligne.
.element {
display: block;
}
📋 Éléments block par défaut :
div, p, h1-h6, section, article, header, footer, ul, li
display: inline
Prend uniquement la largeur nécessaire, reste sur la même ligne.
.element {
display: inline;
}
Inline 1
Inline 2
Inline 3
📋 Éléments inline par défaut :
span, a, strong, em, img
⚠️ Limitation : width et height n'ont pas d'effet
display: inline-block
Comme inline, mais accepte width, height, padding et margin.
.element {
display: inline-block;
width: 150px;
}
✅ Usage : Boutons, cartes côte à côte, menus horizontaux
display: none
Cache complètement l'élément (n'occupe pas d'espace).
.element {
display: none;
}
💡 Alternative :
visibility: hidden; cache l'élément mais garde l'espace
