css - CSS布局在div上没有边框

Question

我已经多次遇到这个问题。仍然不知道是什么原因造成的。

复制：

1. 打开http://jsbin.com/ibowed/1/edit
2. 在 CSS 面板中找到.l-search-index .top {@ line 26
3. 更改border: 1px solid #ff0000;为border: 0;
4. 什么？

浏览器：chrome，但我认为你可以尝试其他任何..

请指教！

Answer 1

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

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

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

我相信有人可以给出更技术性的解释，但这就是我对正在发生的事情的看法。

下面是一个简化的测试用例： http: //jsbin.com/ukodus/2/
去掉//前面的任意几行 CSS 看看效果。

---

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

Answer 2

这是一个非常不直观的边距折叠案例：

CSS 规范的第 8.3.1 节解释了边距是如何处理的以及在什么情况下它们会折叠。规则不太容易理解（有几种特殊情况），但我为您引用规范的相关部分：

在 CSS 中，两个或多个框（可能是或不是兄弟）的相邻边距可以组合形成一个边距。以这种方式组合的边距称为折叠边距，由此产生的组合边距称为折叠边距。

两个边距相邻当且仅当：没有行框、没有间隙、没有填充和没有边框将它们分开

^{（我强调）}

因此，一旦您移除边框，元素的垂直边距就会崩溃。由于您的利润率为负，因此您的情况有点复杂。

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

Answer 3

这是解决方案。

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

你必须添加一个溢出。

希望这可以帮助。