html - 应用于顶部的CSS底部边距

Question

上边距小于下边距的零高度 div 的位置等于距页面顶部的下边距。给 div 任何高度或放入任何内容会导致它按预期定位。这是为什么？

<div style="margin: 2px 0 50px;"></div>

fiddle :http://jsfiddle.net/atfu4waw/

(您必须检查元素才能看到 div。)

Answer 1

发生这种情况是因为对于空框，顶部和底部边距折叠(使用其中最大的一个而忽略较小的一个)。

来自docs :

Empty blocks

If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

折叠边距是 box formatting context 的一个特征和 rules for collapsing有时很复杂。

---

此外，如果您正在使用 Chrome 开发工具来检查您的元素，您不应该真的相信它对边距的表示，因为它没有正确呈现(至少对于我的版本来说不是)。您可以通过在元素后添加内容来更好地检查真正的边距在哪里:

<div style="margin: 20px 0 50px;"></div>
aaaa