css - CSS边际崩溃？

Question

我正在OS X上使用Google Chrome浏览器，而且似乎遇到了利润下降的问题。我有两个div彼此叠放，两个的margin-top为2px，一个的margin-bottom为5px，两个都有1px的边框。根据我的算法，div的“内容”区域之间应该有1 + 1 + 2 + 5 = 7px的间距，因为边框可以防止边距塌陷？

更令人困惑的是，在我的一个div带有一个3px边框且在上述一个div的下面有一个0边距顶部的位置的情况下，我最终得到了9px的空间（这是我非常渴望的）。 div之间的唯一区别是缩小边框并重新定义边距的附加类，因此两个div具有相同的填充（仅padding-bottom为0）。谁能指出我哪里出问题了？

Answer 1

边框会占用部分空白空间。相邻边距崩溃。

暂时忽略边界。假设您有两个唱片。顶部底部有2px的边距。底部有5px的页边空白。他们之间有什么空间？正确答案是5px，这是这两个值的最大值。它不是添加剂。

现在，向每个边框添加1px边框，然后将该边距减小到3px。