Problem with transparent margin

Question

Here is my CSS (simplified):

body {
    background: url('bg.gif') left top;
}
#content {
     background: #ddd;
}
.box {
    overflow: hidden;
    margin-top: 10px;
    background: #1e1e1e url('left-bottom-corner.gif') left bottom no-repeat;
}

And the markup:

<div id="content">
    <div class="box">
        <p>lorem ipsum</p>
    </div>
</div>

Now the problem. In the place where the .box has 10px top margin, the background of #content div is not visible, instead, the background of the body is visible.

I cannot use padding because I need to style the .box divs to have round borders and their own background, so I have to use margin.

How can I fix this incorrect behaviour?

Answer 1

It's not a bug - it's called margin collapsing.

You could do with preventing the margins from touching - this is why adding padding or a border fixes it.