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.

THE 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;
}

/* Propriétés individuelles */
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

Practical example

.card {
padding: 1.5rem;
background-color: #f5f5f5;
}

.button {
padding: 0.75rem 1.5rem;
background-color: blue;
color: white;
}

THE 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;
}

.custom {
border-radius: 10px 20px 30px 40px;
/* TL | TR | BR | BL */
}

Le problème

Par défaut, width And 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;
}

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 absolute Or fixed
• Éléments avec overflow différent de visible
• Éléments Flexbox ou Grid

Solutions

/* 1. Utiliser padding au lieu de margin */
.container {
padding-top: 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>