透明边距问题答案

【问题标题】：Problem with transparent margin透明边距问题
【发布时间】：2010-12-21 07:08:59
【问题描述】：

这是我的 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 的背景是不可见的，而 body 的背景是可见的。

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

如何解决这种不正确的行为？

【问题讨论】：

见这里：stackoverflow.com/questions/315738/…

标签： css

【解决方案1】：

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

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

【讨论】：

我读了那篇文章，在我看来这与我的问题无关，没有两个边距接触任何地方。只有一个上边距，在它上面没有其他边距。所以没有什么可以崩溃的。边距创建正确的空间（10 像素）。问题是为什么 body 的背景是可见的，而不是 #content div 的背景。
太棒了！终于找到了对我来说最后剩下的 CSS 谜团之一的答案。还有一篇很棒的文章来解释它。谢谢，格雷格。我知道margin collapsing，但从来没有想到它会导致“过多”的margin。