css底部保证金适用于顶部

Question

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

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

小提琴：http://jsfiddle.net/atfu4waw/

（你必须检查元素以查看div。）

Answer 1

这是因为对于空盒子，顶部和底部边距会崩溃（使用其中最大的一个而忽略较小的边距）。

来自docs：

  

清空

     

如果没有边框，填充，内联内容，高度，   或最小高度将块的边缘顶部与其边缘底部分开，   然后它的顶部和底部边缘崩溃。

折叠边距是box formatting context的一项功能，rules for collapsing有时很复杂。

---

此外，如果您使用Chrome开发工具检查您的元素，您不应该真正信任它的边距表示，因为它没有正确呈现（至少对于我的版本它不是）。您可以通过在元素后添加内容来更好地检查实际边距的位置：

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