Transparent Margin Problem

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. Where the .box has a top edge of 10px, the background of the #content div is not displayed, instead the background of the body is displayed.

I cannot use indentation because I need to erase div.box in order to have round borders and my own background, so I have to use margin.

How can I fix this incorrect behavior?

Answer 1

This is not a mistake - it is called a margin reversal .

You can do this by avoiding touching the fields — that’s why adding a pad or border corrects it.