Marges qui se chevauchent

Bonjour,

Il y a un comportement css, que je rencontre de plus en plus régulièrement et dont je n'arrive ni à comprendre pourquoi, ni comment l'éviter : Il s'agit du chevauchement des marges entre un bloc enfant et son parent.

Prenons par exemple deux div :

<div id="parent">
<div id="enfant">
Test
</div>
</div>

#parent{
background-color:red;
height:100px;
margin-top:50px;
width:100px;
}
#enfant{
background-color:blue;
height:80px;
margin-top:20px;
width:100px;
}

Donc avec ce code, pourquoi diable ai-je les deux marges qui se superposent au lieu de décaler le div enfant de 20 pixels à l'intérieur de son parent ?

Les solutions que je connais pour régler ce problème :
- mettre un float sur le parent
- mettre un overflow hidden ou auto sur le parent
- mettre une bordure sur le parent
Mais aucune ne me convient vraiment...

J'ai remarqué aussi de cette superposition des marges n'apparait que pour les marges top et bottom mais pas left ou right.
De plus IE (6 & 7) ne fait pas cette superposition.

Bref pour résumer, je ne comprends pas pourquoi ça se comporte comme ça, et comment faire pour le corriger élégamment.

Merci.

Hello

On appelle ce comportement la "fusion des marges". Deux liens pour infos / solutions :

- La doc CSS2 en français,
- Blocs imbriqués et fusion des marges, chez Florent.

Tu as fait le tour des solutions (parent flottant, overflow, bordure). Mais dans ton exemple pour éviter le problème on pourrait aussi remplacer le margin-top de #enfant par un padding-top sur #parent.

Donc c'est bien ce que je pensais, c'est le comportement normal que de fusionner ces marges.

D'où ma question, mais pourquoi donc ? Quel est l'intérêt d'une telle fusion ?
Pour deux éléments de même niveau je peux le comprendre mais pour une relation contenant - contenu cela me parait étrange.

Je doute un peu que j'aurai une réponse à part en interrogeant les grands manitous du css, mais si quelqu'un a un début de réponse ou un exemple de cas ou c'est utile, je suis preneur.

Surtout que bon, tel quel, à moins d'avoir une marge de l'enfant supérieure à celle du parent, autant pas en mettre, elle sert à rien quoi.

Merci pour les liens