css - 当顶部元素的底部边距为 50 像素而底部元素的顶部边距为 50 像素时，为什么两个元素仅相距 50 像素？

Question

我需要确保两个元素始终相隔 100 像素。我的代码没有错误，但由于某种原因，P 标签上的 margin-bottom 设置为 50 像素，而其下方 DIV 上的 margin-top 也设置为 50 像素。

它们总共只有 50 像素，而不是总共 100 像素。有人可以解释一下吗？我的页面上没有任何浮动，所以这不是由于清算问题。所有 html 和 css 都已经过验证。

这发生在最新版本的 Chrome 和 FIrefox 3.6 中。

这是我的代码示例：

#content p {
    margin-bottom: 50px;
}

#content #posted {
    border-top: 1px dotted #ccc;
    line-height: 20px;
    margin-top: 50px;
}

score 4 · Accepted Answer

边距相互重叠。元素的最大边距将是两个元素之间的边距。

如果这不是 IE 中发生的事情，那是一个 IE 错误，因为这就是 CSS 的设计方式。

您可以改用填充，或者只是确保两个元素的边距都是 100 像素。

score 1 · Accepted Answer

边距不会像那样堆叠。底部元素仅设置距顶部元素 50px 的边距，而不是顶部元素的边距。因此，您需要将边距设置为 100 像素。

2 回答 2