Question

我多次遇到过这个问题。仍然不知道是什么导致了这一点。

重现：

浏览器：chrome，但我想你可以在其他任何地方尝试..

请指教！

Answer 1

这与边距重叠的方式有关，以及某些属性如何强制它们被包含。如果在页面上放置2x div，两者的边距均为100px，则这些div之间的间距将为100px。不是200px。这是因为允许边距与其他边距重叠。这就是利润的运作方式。这是件好事。

但是如果你把一个div放在另一个div中，两个都有边距，那么这些边距也会重叠。子元素的边距与父元素重叠。

但是，正如您所发现的，某些属性 - border，还有填充和溢出 - 强制父级包含其子级的边距而不是重叠它们。

我确信有人可以提供更多技术性的解释，但这就是我如何看待正在发生的事情。

这是一个简化的测试用例：http://jsbin.com/ukodus/2/
在任何CSS行之前删除//以查看效果。

“此行为称为边距折叠。只有顶部/底部边距会折叠，而不是左/右。” - @cimmanon

Answer 2

这是一个非常不直观的崩溃边缘的情况：

CSS规范的

§ 8.3.1解释了如何处理边距以及它们在何种情况下崩溃。规则不太容易理解（有几个特殊情况），但我引用了规范的相关部分：

在CSS中，两个或多个框的相邻边距（可能或   可能不是兄弟姐妹）可以组合形成一个边缘。边距   结合这种方式据说会崩溃，并由此产生组合   保证金称为折现保证金。

当且仅当以下情况下，两个边距相邻：没有线框，没有间隙，没有填充和没有边界将它们分开

^{（我强调）}

因此，只要删除边框，元素的垂直边距就会崩溃。你的情况有点复杂，因为你的利润率为负。

要解决此问题，您可以设置overflow属性或在padding:1px元素上应用.top。

Answer 3

这是解决方案。

.l-search-index .top{border: 0; height: 70%; overflow: auto;}

您必须添加溢出。

希望这有帮助。