La propriété margin-bottom du dernier élément d'un div ne "prolonge" pas le div

Question

J'ai un élément dans un div, qui a une image d'arrière-plan. Au-dessous de la div j'ai une autre div avec une autre image de fond. Maintenant, le problème est que si le dernier élément contenu dans la première div a margin-bottom appliquée, il y aura un écart entre les 2 divs comme ceci:

Screenshot http://img40.imageshack.us/img40/5603/littlesnapperh.png

Notez que le gap gris causé par la marge inférieure propriété de l'élément h2 contenue dans la première div. Je sais que cela peut être résolu si je passe de margin-bottom à padding-bottom mais que faire si j'ai besoin de margin-bottom?

Comment résoudre ce problème?

Answer 1

Il s'agit d'une fonctionnalité connue sous le nom de marges de réduction. Voir: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Le plus simple (à part de remplacer la marge avec rembourrage comme vous le suggérez) est d'ajouter une petite bordure (1px) invisible ou rembourrage à l'élément extérieur.

Answer 2

Probablement quelque chose à voir avec un débordement: caché ou l'un des éléments ne s'efface pas correctement. Si ajouter un dépassement: caché au premier div il pourrait le réparer.