当顶部元素具有50px边距底部而底部元素具有50px边距顶部时，为什么两个元素仅相隔50个像素？

Question

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

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

最新版本的Chrome和FIrefox 3.6会发生这种情况。

以下是我的代码示例：

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

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

Answer 1

边距重叠在一起。元素的最大边距将是两个元素之间的边距。

如果这不是IE中发生的事情，那就是IE漏洞，因为这就是CSS的设计工作方式。

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

Answer 2

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