CSS布局在div上没有边框

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

复制：

打开

在CSS面板中查找

.l-search-index.top{

@第26行

将

border:1px solid\ff0000；

更改为

border:0；

什么

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

---

请告知！

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

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

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

我相信有人能给出一个更技术性的解释，但这就是我对所发生事情的看法

下面是一个简化的测试用例：
删除CSS任何行之前的

/

，以查看效果

---

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

解决方案如下

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

您必须添加一个溢出

---

希望这能有所帮助。

这是一个非常不直观的折页情况：

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

在CSS中，两个或多个方框的相邻边距（，可能是或 可能不是同级）可以组合形成单个页边距。页边距 这种结合方式被称为崩溃，由此产生的结合 边距称为折叠边距

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

（我强调）

所以，一旦你移除边框，元素的垂直边距就会崩溃。你的情况会变得有点复杂，因为你有负边距

---

要解决此问题，您可以设置

overflow

属性或在

.top

元素上应用

padding:1px

。

可能是jsbin有问题。或者这也发生在您的测试代码中吗？在干净的环境中：->F12，勾选

.top

classed div上的边框。相同。+1；非常奇怪。它是由负片触发的e

margin top

在内部div上；将其从等式中移除，切换边框现在可以按预期工作。我暂时无法解释为什么内部元素的样式会对外部元素产生这种影响。这就是边距的工作方式。它们自然重叠。请参阅我糟糕的非技术性答案和jsbin测试answer、 @Dominic-是的，答案是+1。我还没有机会仔细思考得出这个结论，但你显然一针见血。这种行为称为边距塌陷。只有上/下边距会塌陷，而不是左/右。+1，谢谢，你的测试用例非常有帮助。我也会接受这个答案！帮助：），但是正如我在问题中提到的，我真的很想知道这种现象的背景。这是一个有助于你的查询的链接。-结合你的两个类阅读它们1）。l-search-index.top和2）。l-search-index.icon-@zsitroth这里的关键部分是“哪些可能是兄弟姐妹，哪些可能不是兄弟姐妹”.在最初的示例中，很容易看出页边距可能会相互影响这是不直观的。感谢您参考规范！