CSS边缘崩溃?

时间:2010-04-19 08:35:34

标签: css google-chrome margin collapse

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

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

3 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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