适用于顶部的css底部边距

顶部边距小于底部边距的零高度定位的数量等于页面顶部的底部边距。给div任何高度或放入任何内容导致其按预期定位。为什么是这样？适用于顶部的css底部边距

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

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

（你将有权检查元素，查看专区）

来源

2014-12-05 someBSthisis

使用溢出：隐藏;对于div – nikita 2014-12-05 11:20:04

尽管如此，我仍然想知道为什么。这背后的规则或逻辑是什么？ – someBSthisis 2014-12-05 11:25:05

这是因为边缘折叠浮动框和任何其他框之间的边距不会塌陷（即使在浮动物和其流入儿童之间也不会）。建立新块格式上下文的元素边距（例如浮动元素和'可见'以外的'溢出'元素）不会因其流入子元素而崩溃。内嵌块框的边距不会折叠（即使对于它们的流入子项也是如此）。 – nikita 2014-12-05 11:29:30

这是因为空箱，顶部和底部边缘崩溃（其中最大的一个被使用并且较小的被忽略）。

从docs：

空块

如果没有边界，填充，内联内容，高度，或最小高度，以从它的余量分离块的边距底部，然后它的顶部和底部边缘崩溃。

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

此外，如果你使用的是Chrome浏览器开发工具来检查你的元素，你真的不应该相信缘其代表性，因为它是不正确渲染（至少在我的版本是不是）。您可以更好地查看其中真正的保证金是由元素后添加内容：

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

来源

2014-12-05 11:23:56

在提示此问题的实际情况中，零高度内部浮动的div最终被错误定位。 div之后的内容没有反映这一点，并且似乎被正确定位。 – someBSthisis 2014-12-05 11:28:53

@someBSthisis我不知道是什么促成了这个问题，如果你不在问题中说出来的话。问题内容中描述的内容很明确：空白的div既有顶部边界也有底部边界。从折叠边缘渲染规则中可以看出，它们中最大的将被用作边距。这就是浏览器渲染完成的方式。如果您的浮动和/或内联内容有更复杂的场景，事情会随着更多影响渲染的规则而改变。如果你想了解更多，你可以研究我在答案中链接的文档（这将需要几个小时）。 – 2014-12-05 12:44:10

适用于顶部的css底部边距

回答

相关问题