Le Modèle de Boîte CSS : Maîtriser Margin, Padding et Border
Comprenez en profondeur le modèle de boîte CSS pour contrôler l’espacement et les dimensions de vos éléments. Un concept fondamental pour toute mise en page web.
Objectifs pédagogiques
- Comprendre les composants du modèle de boîte
- Maîtriser margin, padding et border
- Utiliser box-sizing correctement
- Résoudre les problèmes de fusion de marges
En CSS, chaque élément est représenté comme une boîte rectangulaire avec quatre zones distinctes.
Schéma du modèle de boîte
┌──────────────────────────────────────┐
│ MARGIN │
│ ┌──────────────────────────────┐ │
│ │ BORDER │ │
│ │ ┌──────────────────────┐ │ │
│ │ │ PADDING │ │ │
│ │ │ ┌──────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ └──────────────┘ │ │ │
│ │ └──────────────────────┘ │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────────┘
Définitions
- Content : Le contenu réel (texte, images)
- Padding : Espace entre le contenu et la bordure
- Border : La bordure visible de l’élément
- Margin : Espace extérieur entre les éléments
Visualiser dans le navigateur
Ouvrez les DevTools (F12) et inspectez un élément. Vous verrez le modèle de boîte avec les dimensions calculées.
Le padding crée de l’espace à l’intérieur de l’élément, entre le contenu et la bordure.
Syntaxes
/* Toutes les directions */
.box {
padding: 20px;
}
/* Vertical | Horizontal */
.box {
padding: 20px 40px;
}
/* Haut | Horizontal | Bas */
.box {
padding: 10px 20px 30px;
}
/* Haut | Droite | Bas | Gauche (sens horaire) */
.box {
padding: 10px 20px 30px 40px;
}
/* Propriétés individuelles */
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
Exemple pratique
.card {
padding: 1.5rem;
background-color: #f5f5f5;
}
.button {
padding: 0.75rem 1.5rem;
background-color: blue;
color: white;
}
box-sizing: border-box).
Le margin crée de l’espace à l’extérieur de l’élément, entre celui-ci et ses voisins.
Syntaxes identiques au padding
.box {
margin: 20px; /* Tous */
margin: 20px 40px; /* V | H */
margin: 10px 20px 30px; /* T | H | B */
margin: 10px 20px 30px 40px; /* T | R | B | L */
}
Centrage horizontal avec auto
.container {
width: 800px;
margin: 0 auto; /* Centré horizontalement */
}
/* Équivalent */
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
Marges négatives
/* Faire déborder un élément */
.highlight {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
background-color: yellow;
}
Syntaxe raccourcie
.box {
border: 2px solid #333;
/* largeur | style | couleur */
}
Styles de bordure
.examples {
border-style: solid; /* Ligne pleine */
border-style: dashed; /* Tirets */
border-style: dotted; /* Pointillés */
border-style: double; /* Double ligne */
border-style: groove; /* 3D enfoncé */
border-style: ridge; /* 3D en relief */
border-style: inset; /* Effet enfoncé */
border-style: outset; /* Effet en relief */
border-style: none; /* Pas de bordure */
}
Bordures individuelles
.card {
border-top: 3px solid blue;
border-bottom: 1px solid #ccc;
}
.accent {
border-left: 4px solid #0066cc;
padding-left: 1rem;
}
Coins arrondis
.rounded {
border-radius: 8px;
}
.pill {
border-radius: 9999px; /* Bouton pilule */
}
.custom {
border-radius: 10px 20px 30px 40px;
/* TL | TR | BR | BL */
}
Le problème
Par défaut, width et height définissent la taille du contenu seul.
/* content-box (défaut) */
.box {
width: 200px;
padding: 20px;
border: 10px solid;
}
/* Largeur totale = 200 + 40 + 20 = 260px ! */
La solution : border-box
/* border-box */
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 10px solid;
}
/* Largeur totale = 200px (inclut padding et border) */
Reset recommandé
/* Appliquer border-box globalement */
*, *::before, *::after {
box-sizing: border-box;
}
/* Alternative héritée */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
box-sizing: border-box dans vos projets. Cela rend le calcul des dimensions intuitif.
Les marges verticales de blocs adjacents peuvent fusionner en une seule marge.
Exemple de fusion
<p style="margin-bottom: 30px;">Premier paragraphe</p>
<p style="margin-top: 20px;">Deuxième paragraphe</p>
<!-- L'espace entre eux sera 30px, pas 50px ! -->
Règle de fusion
La marge résultante est égale à la plus grande des deux marges, pas leur somme.
Quand ça ne fusionne PAS
- Marges horizontales (gauche/droite)
- Éléments avec
display: inline-block - Éléments en position
absoluteoufixed - Éléments avec
overflowdifférent devisible - Éléments Flexbox ou Grid
Solutions
/* 1. Utiliser padding au lieu de margin */
.container {
padding-top: 20px;
}
/* 2. Utiliser flexbox */
.stack {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 3. Utiliser une bordure invisible */
.parent {
border-top: 1px solid transparent;
}
HTML
<div class="card-grid">
<article class="card">
<img src="image1.jpg" alt="Image 1" class="card-image">
<div class="card-content">
<h3 class="card-title">Titre de la carte</h3>
<p class="card-text">Description du contenu...</p>
<a href="#" class="card-button">En savoir plus</a>
</div>
</article>
<!-- Répéter pour d'autres cartes -->
</div>
CSS avec modèle de boîte
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Grille de cartes */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}
/* Carte */
.card {
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
background: white;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* Image */
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
/* Contenu */
.card-content {
padding: 1.5rem;
}
.card-title {
margin-bottom: 0.75rem;
}
.card-text {
margin-bottom: 1rem;
color: #666;
}
/* Bouton */
.card-button {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: #0066cc;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.2s;
}
.card-button:hover {
background-color: #0052a3;
}
