CSS边距折叠？

Posted 2023-03-06

【中文标题】CSS边距折叠？

【英文标题】：CSS margin collapsing?

【发布时间】：2011-02-09 14:28:47

【问题描述】：

我在 OS X 上使用 Google Chrome，我似乎遇到了边距崩溃问题。我有两个 div 堆叠在一起，顶部边距为 2px，边距底部为 5px，边框均为 1px。根据我的算法，div的“内容”区域之间应该有1+1+2+5=7px的空间，因为边框可以防止边距折叠？

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

【问题讨论】：

如果你能把相关的 CSS 和 html 发给我们看，对我们有更大的帮助，当我们看到你所指的代码时，更容易发现问题:)

【参考方案1】：

边框会占用部分边距空间。相邻边距塌陷。

暂时忽略边界。假设你有两个 disv。顶部有 2px 边距底部。底部有 5px 边距顶部。他们之间的距离是多少？正确答案是 5px，是这两个值中的最大值。它不是添加剂。

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

【参考方案2】：

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

因此元素之间应该有 5 px 的间隙。看起来好像它们重叠。

【参考方案3】：

也许具有更大权重或 id 的父类具有更高的优先级（您知道，ID 具有更多的特异性，或者是父类等。那些复杂的层次关系（或者您有一个 !important; 某处.. ))，并且那个有margin：0或padding：0，不知何故。

Anywa，用一大块 html 和它的 css 更容易猜测... :) 因为可能有很多东西。