Chargement...

Margin CSS

Vous peignez une boîte, tracez sa bordure et arrondissez les coins. Compétence suivante : écarter les boîtes. margin est l’espace extérieur autour de l’élément — la respiration hors de la bordure.

Qu’est-ce que margin ?

La marge est un espace vide autour de l’extérieur de la bordure de l’élément. Elle sépare une boîte de ses voisines. Elle ne peint pas le fond de l’élément dans cet écart — l’écart est hors de la zone remplie.

Margin vs padding (contraste rapide)

Padding (leçon suivante) est à l’intérieur de la bordure — entre contenu et bord. Margin est à l’extérieur de la bordure — entre cette boîte et la suivante. Si vous retenez une ligne aujourd’hui : margin = extérieur, padding = intérieur.

Raccourci : combien de valeurs ?

Vous pouvez passer une, deux, trois ou quatre longueurs. L’ordre des côtés est fixe.

📊 Nombre de valeurs du raccourci margin

Valeurs Signification Note quotidienne
1 Les quatre côtés identiques Respiration égale autour d’une carte
2 Haut+bas, puis gauche+droite Paires verticale et horizontale
3 Haut, gauche+droite, bas Moins courant — sachez que ça existe
4 Haut, droite, bas, gauche Contrôle total, sens horaire depuis le haut

Même espace sur chaque côté

Commencez par une longueur pour tous les côtés.

Même margin sur tous les côtés

css
CSS Code 
.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Deux valeurs — vertical, puis horizontal

Deux longueurs associent les côtés opposés : d’abord haut et bas ; ensuite gauche et droite.

Margin vertical puis horizontal

css
CSS Code 
.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}

Quatre valeurs — sens horaire depuis le haut

Quand chaque côté veut son écart : haut → droite → bas → gauche.

Raccourci margin à quatre côtés

css
CSS Code 
.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}

Centrer un bloc avec auto

Pour une boîte de type bloc avec une largeur fixée, margin-left: auto et margin-right: auto (souvent margin: 0 auto) partagent l’espace restant des deux côtés — classique pour centrer horizontalement.

Centrage horizontal avec auto

css
CSS Code 
.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Les marges verticales peuvent collapser

Quand deux éléments bloc s’empilent, la marge basse du premier et la marge haute du second fusionnent souvent en un seul écart — en général le plus grand des deux, pas leur somme. Cela surprend les débutants ; attendez-vous-y entre paragraphes et sections empilés.

Blocs empilés avec collapse de margin

css
CSS Code 
.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}

.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* Entre eux vous voyez souvent environ 24px, pas 48px */

Un côté à la fois

Les formes longues comme margin-top sont parfaites quand vous n’avez besoin d’espace qu’au-dessus d’un titre ou sous un bouton.

Margin haut seulement

css
CSS Code 
.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}

À vous de jouer

  1. Donnez à deux cartes margin: 16px et observez l’écart extérieur.
  2. Réécrivez-en une en margin: 24px 12px et notez vertical vs horizontal.
  3. Centrez une boîte de 280px avec margin: 0 auto.
  4. Empilez deux blocs colorés avec margin-bottom et margin-top tous deux à 24px — l’écart ressemble-t-il à 24 ou 48 ?
  5. Espacez un titre avec margin-top seulement.

Erreurs fréquentes

  • Utiliser margin quand vous vouliez padding (coussin intérieur pour le texte)
  • S’attendre à ce que margin: auto centre chaque item flex/grid comme un simple bloc (le contexte de mise en page compte)
  • Ajouter marges haut et bas en supposant qu’elles s’additionnent toujours (le collapse peut réduire l’écart)
  • D’énormes marges partout au lieu d’une petite échelle cohérente
  • Mélanger l’ordre des quatre valeurs (haut, droite, bas, gauche)

Résumé

  • Margin est l’espace extérieur hors de la bordure
  • Raccourci : 1, 2 ou 4 valeurs (quatre dans le sens horaire depuis le haut)
  • margin: 0 auto centre horizontalement un bloc avec largeur
  • Les marges verticales entre blocs empilés peuvent collapser
  • Utilisez les formes longues quand un seul côté a besoin d’espace
  • Padding est le cousin intérieur — leçon suivante

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
9
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel