La règle de base de la fusion des marges est la suivante : 2 marges consécutives fusionnent si aucune marge interne (padding) ou bordure (border) ne s'interpose entre les deux.

Il faut noter que cette règle ne concerne que les marges verticales (haut et bas donc) et en aucun cas les marges horizontales.

Pour la partie théorique, je vous renvoie à l'inévitable site du W3C.

Hop, passons maintenant à la pratique.

Un premier exemple de base

Voici deux paragraphes l'un à la suite de l'autre, avec chacun une marge haut et bas de 10 pixels :

p{ margin:1em 0;}

<p>Lorem ipsum</p>
<p>Dolor sit amet</p>

L'espacement crée par les marges entre ces deux paragraphes sera de 10px. On constate bien que la marge bas du premier et la marge haut du second paragraphe fusionnent pour n'en former qu'une :

Fusion des marges, exemple 1

La fusion entre blocs de niveau différents

Entourons maintenant ces 2 paragraphe d'un élément div, lui aussi doté d'une marge :

<div id="conteneur">
  <p>Lorem ipsum</p>
  <p>Dolor sit amet</p>
</div>

#conteneur{ margin:10px 0;}
p{ margin:10px 0;}

On pourrait s'attendre à ce que la marge des paragraphe crée un espace à l'intérieur du div. Or là encore la règle de fusion des marges s'applique entre les marges du div et celles des élements p. Le résultat sera donc le suivant :

Fusion des marges, exemple 2

Appliquons à présent une bordure à l'élement conteneur :

#conteneur{ margin:10px 0; border:2px dashed #000;}
p{ margin:10px 0;}

Comme le précise la règle, la fusion ne s'opère plus car la bordure du bloc conteneur fait obstacle entre la marge de celui-ci et celles des paragrapes. Les marges des paragraphes sont alors contenues à l'intérieur du bloc conteneur :

Fusion des marges, exemple 3

Appliquons à présent une marge interne (padding) à notre div conteneur :

#conteneur{ margin:10px 0; padding:10px;}
p{ margin:10px;}

Là encore la règle précise que la fusion ne doit plus s'appliquer, nous allons alors nous retrouver avec un espace non pas de 10px mais de 20 pixels (le padding du bloc conteneur + la marge du p) :

Fusion des marges, exemple 4

Cette situation (plutôt fréquente) peut être gênante si l'on souhaite simplement créer un espacement de 10px, tout en gardant les marges entre les paragraphes. Pour y remedier, la solution la plus simple et la plus rapide consiste à appliquer un padding au bloc conteneur non pas de 10 mais de 1 pixel seulement :

#conteneur{ margin:10px 0; padding:1px 10px;}
p{ margin:10px 0;}

Fusion des marges, exemple 5

Et voilà le travail :) Bon, en réalité l'espacement est maintenant de 11px, mais la différence visuelle peut être considerée comme négligeable (comment ça non ?)

(A suivre...)