margin-bottom property of a div's last element doesn't "extend" the div

Question

I have an element in a div, which has a background image. Below the div I have another div with another background image. Now the problem is that if the last element contained in the first div has margin-bottom applied there will be a gap between the 2 divs like this:

Notice the gray gap caused by the margin-bottom property of the h2 element contained within the first div. I know this can be solved if I switch margin-bottom to padding-bottom but what if I need margin-bottom?

How to fix this?

Answer 1

Probably something to do with overflow:hidden or one of the elements not clearing properly. If add overflow:hidden to the first div it might fix it.

Answer 2

This is a feature known as collapsing margins. See: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

The easiest way around (aside of replacing the margin with padding as you suggest) is to add a small (1px) invisible border or padding to the outer element.