margin en CSS : espacer les éléments sans jamais toucher leur taille

Espacer deux boutons, éloigner un titre du paragraphe qui le suit, centrer une carte au milieu de son conteneur : dans la grande majorité des cas, la réponse commence par margin. C'est la propriété la plus utilisée du Modèle de boîte, et pourtant celle qui réserve la surprise la plus fréquente aux débutants : deux marges verticales censées s'additionner, et qui ne le font pas.

Bien maîtriser margin, c'est comprendre trois choses distinctes : comment écrire sa valeur rapidement avec le raccourci, comment centrer un bloc grâce à une valeur automatique, et pourquoi ses marges verticales se comportent parfois d'une façon qui semble défier la logique.

Définition

margin définit l'espace transparent entre la bordure d'un élément et ses voisins. Contrairement au padding, cet espace ne fait jamais partie de la boîte elle-même : il ne reçoit ni fond, ni bordure, ni ombre, il se contente de pousser les autres éléments plus loin.

.bouton {
  margin-top: 24px;
  margin-right: 8px;
  margin-bottom: 24px;
  margin-left: 8px;
}

Les quatre côtés se règlent indépendamment, mais dans la pratique on les écrit presque toujours avec le raccourci margin, plus rapide à lire et à modifier.

Le raccourci margin et ses quatre formes

Le nombre de valeurs passées à margin change leur signification. Cette règle vaut aussi pour padding, qui suit exactement la même logique.

Retenir l'ordre des quatre valeurs suffit à éviter l'essentiel des erreurs : il commence toujours en haut, puis tourne dans le sens horaire.

Centrer un bloc avec margin: auto

Quand un élément de bloc a une largeur fixée, plus étroite que son conteneur, donner à ses marges gauche et droite la valeur auto les rend strictement égales : le bloc se retrouve centré.

.conteneur {
  width: 600px;
  margin: 0 auto;
}

Cette technique a deux conditions strictes, souvent oubliées : l'élément doit avoir une largeur explicite, et il doit rester un élément de bloc classique. Sur un élément déjà géré par Flexbox, cette astuce devient inutile : justify-content: center sur le conteneur parent fait le même travail sans avoir à fixer de largeur du tout.

Le piège du collapsing : les marges verticales qui fusionnent

Deux marges verticales adjacentes entre éléments de bloc ne s'additionnent pas toujours : elles fusionnent en une seule marge, égale à la plus grande des deux. C'est ce qu'on appelle le collapsing des marges, et c'est presque toujours la première explication à chercher quand un espacement calculé sur le papier ne correspond pas à ce qui s'affiche.

.titre {
  margin-bottom: 20px;
}
.paragraphe {
  margin-top: 30px;
}

/* Espace réel entre les deux : 30px, pas 50px */

Le phénomène touche aussi la marge d'un élément vide qui n'a ni padding ni bordure, et celle d'un premier enfant contre son parent quand rien ne les sépare. Passer le conteneur en display: flex, en display: grid, ou lui ajouter un padding même minime, suffit à annuler le collapsing entre ses enfants : c'est la sortie la plus simple quand le comportement gêne réellement la mise en page.

Valeurs négatives : rapprocher ou faire déborder

Contrairement au padding, qui ne peut jamais être négatif, margin accepte des valeurs négatives. Une marge négative rapproche un élément de son voisin, jusqu'à le faire chevaucher, ou tire une image jusqu'au bord d'un conteneur qui possède lui-même du padding.

.image-pleine-largeur {
  margin-left: -20px;
  margin-right: -20px;
}

C'est une technique réelle, utilisée pour faire déborder volontairement un élément d'un conteneur centré, mais elle reste fragile : une valeur négative mal ajustée casse silencieusement la mise en page sur un autre écran, sans jamais produire d'erreur visible dans la console.

Questions fréquentes

C'est le collapsing des marges verticales : entre deux éléments de bloc adjacents, seule la plus grande des deux marges compte, elles ne s'additionnent pas. Ce comportement ne concerne que les marges verticales, jamais les marges horizontales.

Avec margin: 0 auto, à condition que l'élément possède une largeur explicite et reste un élément de bloc classique. Sur un conteneur flexible, justify-content: center sur le parent est en général plus simple et plus fiable.

Oui, contrairement au padding qui refuse les valeurs négatives. Une marge négative rapproche deux éléments ou les fait se chevaucher légèrement, une technique à utiliser avec précaution et à toujours vérifier sur plusieurs tailles d'écran.