Croisement des marges (collapsing margins)

Fusion des marges entre deux éléments frères (qui se suivent)

Toute boîte de type bloc frère, va avoir des marges verticales qui se fusionnent.

Ce P (comme tous les P ici) a un margin-top et un margin-bottom de 30px, mais il n'y a que 30px entre lui et son frère.

Ceci est une boîte verte, il s'agit d'un P

Fusion des marges entre un élément et son parent

Le margin de 50px sur le P se voit uniquement à droite et à gauche. La marge verticale fusionne avec le parent DIV.

Empêcher la fusion des marges entre un élément et son parent

Avec padding

On empêche la fusion des marges avec un petit padding pour le parent.

Avec bordure

On empêche la fusion des marges avec une bordure pour le parent.

Avec overflow:auto

On empêche la fusion des marges avec un overflow:auto pour le parent.
Contrairement au padding et à la bordure, cette méthode ne change absolument pas la dimension des blocs.