Question

I got a css problem. Consider the following layout:

<div class="footer-container" style="background: #ff00ff">
 <footer class="wrapper"><h4 style="margin: 20px 0">Some Headline</h4></footer> </div>

The vertical margins of h4 don’t extend the container div, Instead they “spill over”, so that there is a 20px margin outside the container div above and below, which doesn’t have any backgroundcolour.
I know that vertical margins of adjacent elements collapse but this seems to something else.

Thank your for your replies!

Answer 1

Adding overflow:auto to your containing div would fix your collapsing margin issue:

<div class="footer-container" style="background: #ff00ff;overflow:auto">

jsFiddle example