Comprendre le phénomène de fusion des marges

La fusion des marges constitue un mécanisme fondamental du modèle de boîte CSS qui, bien que logique une fois assimilé, génère fréquemment des comportements inattendus chez les développeurs. Lorsque deux marges verticales entrent en contact, elles ne s'additionnent pas : seule la plus grande des deux valeurs s'applique.

Scénarios de fusion

Entre éléments frères consécutifs — La marge inférieure d'un bloc se combine avec la marge supérieure du bloc suivant :

<style>
  .module-a {
    margin-block-end: 30px;
    background: #e74c3c;
  }
  .module-b {
    margin-block-start: 25px;
    background: #3498db;
  }
</style>

<div class="module-a">Premier bloc</div>
<div class="module-b">Second bloc</div>

L'espace intermédiaire ne mesurera pas 55px mais 30px, la valeur maximale.

Entre parent et descendant — Sans obstacle interposé, la marge supérieure d'un élément filtre au-delà de son conteneur :

<style>
  .enveloppe {
    margin: 15px;
    background: #95a5a6;
  }
  .enveloppe p {
    margin: 40px 0;
    background: #2ecc71;
  }
</style>

<div class="enveloppe">
  <p>Paragraphe avec marge généreuse</p>
</div>

Le paragraphe ne présente pas 40px de marge interne ; la marge de l'enveloppe et celle du paragraphe fusionnent pour créer un espace unique de 40px au-dessus du conteneur.

Éléments sans contenu — Un élément vide possédant des marges verticales mais ni remplissage ni bordure voit ses marges supérieure et inférieure s'annuler mutuellement :

.separateur-vide {
  margin: 50px 0;
  /* Pas de contenu, pas de bordure, pas de padding */
}

Le raisonnement derrière cette spécification

Ce comportement, loin d'être un caprice, assure la cohence typographique. Imaginons une succession de paragraphes : sans fusion, l'espace avant le premier paragraphe serait différent de l'espacement inter-paragraphes (somme des marges adjacentes). La fusion harmonise ces valeurs.

Limites et exceptions

La fusion ne s'applique que dans ces conditions :

• Les éléments concernés appartiennent au flux normal (pas de flottement, pas de positionnement absolu)
• Il s'agit de marges verticales (les marges horizontales ne fusionnent jamais)
• Les éléments sont des boîtes de bloc (les éléments en ligne échappent à ce mécanisme)

Stratégies de prévention

Quand la fusion perturbe la mise en page visée, plusieurs approches existent :

Exemple pratique : correction d'un débordement de marge

<style>
  .carte {
    /* Problème : la marge de l'en-tête déborde */
    margin: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    
    /* Solution : établir un contexte de formatage de bloc */
    display: flow-root; /* Alternative moderne à overflow:hidden */
  }
  
  .carte h2 {
    margin: 24px 0 16px;
    color: #2c3e50;
  }
</style>

<article class="carte">
  <h2>Titre de section</h2>
  <p>Contenu textuel...</p>
</article>

L'utilisation de display: flow-root constitue l'approche contemporaine recommandée : elle crée un contexte de formatage de bloc sans effets secondaires indésirables sur le débordement de contenu.

Technique complémentaire : isolation avec padding

.conteneur-isole {
  margin: 0;
  /* Le padding de 1px empêche la fusion sans affecter l'esthétique */
  padding: 1px;
  background-clip: content-box;
}

.conteneur-isole > * {
  margin: 20px 0;
}

Cette approche exploite le fait que la présence de remplissage interrompe la chaîne de fusion, même pour une valeur infime.