CSS底部边距适用于顶部答案

【问题标题】：css bottom margin applying to topCSS底部边距适用于顶部
【发布时间】：2015-02-03 13:05:45
【问题描述】：

上边距小于下边距的零高度 div 的定位量与页面顶部的下边距相等。给 div 任何高度或放入任何内容都会使其按预期定位。这是为什么呢？

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

（您必须检查元素才能看到 div。）

【问题讨论】：

使用溢出：隐藏；对于 div
虽然可行，但我仍然想知道原因。这背后的规律或逻辑是什么？
这是因为边距折叠浮动框和任何其他框之间的边距不会折叠（甚至在浮动框与其流入的子代之间也不折叠）。建立新块格式化上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与它们的流入子代一起折叠。内联块框的边距不会折叠（即使它们的流入子框也不折叠）。

标签： html css

【解决方案1】：

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

来自docs：

空块

如果没有边框、内边距、内联内容、高度，或 min-height 将块的 margin-top 与其 margin-bottom 分开，然后它的顶部和底部边距折叠。

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

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

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

【讨论】：

在提示这个问题的实际场景中，零高度的 div 中有浮动的 div，最终定位不正确。 div 之后的内容没有反映这一点，并且似乎定位正确。
@someBSthisis 如果您不在问题中说出来，我无法知道是什么提示了这个问题。问题内容中的描述很清楚：一个空的 div 具有顶部和底部边距。根据折叠边距渲染规则，它们中最大的将用作边距。浏览器渲染就是这样完成的。如果您有更复杂的带有浮动和/或内联内容的场景，事情将会改变，因为有更多的规则会影响渲染。如果您想了解更多信息，可以研究我在答案中链接的文档（这将花费您几个小时）。