CSS边缘崩溃？

Question

我在OS X上使用谷歌浏览器，我似乎遇到了保证金崩溃的问题。我有两个div叠在一起，两个边缘顶部为2px，边缘底部为5px，两者都有1px边框。根据我的算术，div的“内容”区域之间应该有1 + 1 + 2 + 5 = 7px的空间，因为边界会阻止边缘折叠？

更令人困惑的是，在我有一个带有3px边框且在前面描述的div之一下面的0 margin-top的div的位置，我最终得到了9px的空间（正如我非常渴望的那样）。 div之间的唯一区别是缩小边框并重新定义边距的附加类，因此两个div都具有相同的填充（只有padding-bottom为0）。谁能指出我出错的地方？

Answer 1

Borders消耗部分保证金空间。相邻的边缘崩溃。

暂时忽略边框。假设你有两个残疾人。 Top有2px保证金底部。底部有5px保证金顶部。它们之间的空间是什么？正确答案是5px，是这两个值中的最大值。它不是添加剂。

现在为每个边框添加1px边框，然后将边距减少到3px。

Answer 2

边距被解释为下一个元素的最小空间。

因此，元素之间应该存在5 px的差距。看它就好像它们重叠一样。

Answer 3

也许一个父类，具有更多的权重或一个id，具有更高的优先级（你知道，ID具有更多的特异性，或者父母等等。那些复杂的层次关系（或者你有一个！important;某处... ）），并且那个有边距：0或填充：0，不知何故。

Anywa，用一大块html及其CSS来猜测更容易...... :)因为可能有很多东西。