透明边际问题

Question

这是我的CSS（简化）：

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;
}

标记：

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

现在问题。在.box具有10px上边距的位置，＃content div的背景不可见，而是可见主体的背景。

我不能使用填充，因为我需要设置.box div的样式以具有圆形边框和它们自己的背景，所以我必须使用边距。

如何修复此错误行为？

Answer 1

这不是一个错误 - 它被称为margin collapsing。

你可以防止边距接触 - 这就是添加填充或边框修复它的原因。