CSS 外边距折叠为什么发生？有哪些规则和解决办法？

简化版

普通文档流中的块级盒子，垂直外边距在特定相邻关系下会合并为一个外边距，而不是简单相加。相邻兄弟、父元素与首尾子元素、空块都可能折叠；建立新的 BFC、加入边框或内边距、改用 Flex/Grid 或直接用 gap 可以阻断相应折叠。

详细版

外边距折叠只讨论块级盒子在块格式化上下文中的垂直外边距，水平外边距不会折叠。两个正外边距取较大值；一正一负取最大正值与最小负值之和；全为负值则取绝对值最大的负值。

常见三种关系是：相邻兄弟的下、上外边距；父盒子没有边框、内边距或行内内容隔开时与首尾块级子元素折叠；没有内容、高度、边框和内边距的空块，其上下外边距彼此折叠。

解决时不应机械添加 overflow: hidden。应根据设计意图选择 gap、父级 display: flow-root、少量内边距/边框，或让容器成为 Flex/Grid；同时注意这些方案可能改变裁剪、滚动或布局语义。

完整版教学

一、折叠是块布局的间距合并规则

早期网页大量由标题和段落组成，如果标题下边距 24px、段落上边距 16px 简单相加，就会产生 40px 的过大空白。折叠让相邻段落的“期望最小间距”合并，而不是把两份留白重复累计。这是一条布局算法，不是浏览器 Bug，也不是元素真的丢失了 margin。

盒子 A
margin-bottom: 24px
        ↓ 合并后间距 24px，而非 40px
margin-top: 16px
盒子 B

只有处于普通块格式化上下文、且边缘之间没有分隔物时才有折叠资格。Flex 项、Grid 项、绝对定位元素和浮动元素不会按这套规则互相折叠。

二、相邻兄弟是最直观的一种折叠

两个普通块兄弟之间，前者的 margin-bottom 与后者的 margin-top 会折叠。若两者分别是 20px 和 32px，最终间距是 32px；浏览器把它们理解为两项对同一段空白的要求。

.first  { margin-bottom: 20px; }
.second { margin-top: 32px; }

如果中间插入一个有高度的元素、清除浮动的布局边界，或把父容器改成 Flex/Grid，关系就不再满足。工程里最好统一使用单向间距，例如列表项只给 margin-block-end，减少双向 margin 相遇。

三、正负值不是简单取最大值

多个相邻外边距可能一起参与一次折叠。算法可以记作“最大正值 + 最小负值”；若没有正值，就取最负的那个，其他值不会逐项相加。

参与值	计算	折叠结果
`20px, 32px`	最大正值	`32px`
`30px, -12px`	`30 + (-12)`	`18px`
`-10px, -24px`	最小负值	`-24px`
`18px, 25px, -8px`	`25 + (-8)`	`17px`

负外边距会把后续内容拉近甚至重叠，调试时只看某一个元素容易误判。开发者工具里应同时检查参与折叠链的所有父子和兄弟盒子。

四、父子折叠解释了“margin 跑到父元素外面”

父元素的块级起始边缘与第一个普通流子元素之间，如果没有 border-top、padding-top、行内内容、清除关系或高度约束隔开，子元素的 margin-top 可能与父元素的 margin-top 折叠。视觉上父容器会整体向下，初学者常误以为子元素的 margin 穿透了父盒子。

<section class="card"><h2>标题</h2></section>

.card h2 { margin-top: 40px; }
/* .card 若没有边框/内边距，40px 可能出现在 card 外部 */

给父级 padding-top: 1px 虽能阻断，但会引入真实尺寸；display: flow-root 通常更能表达“建立独立块格式化上下文”的意图。若本来就是组件列表，Flex/Grid 加 gap 往往更清晰。

五、空块会把上下外边距折成一个

一个普通流块若没有边框、内边距、行内内容、height 或 min-height 将上下边缘分开，它自己的 margin-top 与 margin-bottom 可以折叠。这个空块还可能把前后兄弟的外边距串成一次多方折叠。

.spacer {
  margin-top: 20px;
  margin-bottom: 30px;
}

上例的空元素不一定制造 50px 空白，常见结果是 30px。不要使用空标签加 margin 当间隔器；这既使 DOM 失去语义，也会把折叠链变得难以推理。

六、选择阻断方法时要计算副作用

阻断折叠的方法很多，但它们并不等价。overflow: hidden 会建立 BFC，却可能裁剪阴影、下拉菜单和粘性元素；border-top: 1px solid transparent 会增加盒子尺寸；padding-top: 0.01px 则像补丁，难以维护。

方法	是否阻断	主要代价
`display: flow-root`	是	改为独立 BFC，通常副作用较小
`display: flex/grid`	是	子元素进入另一套布局模型
`overflow: hidden/auto`	是	可能裁剪或出现滚动容器
边框/内边距	是	改变尺寸与视觉
`gap`	不制造折叠关系	需要 Flex、Grid 或多列容器

假设十个列表项都写上下 16px margin，开发者要推理九次相遇；改成容器 gap: 16px 后，间距来源只有一处。现代布局下优先用 gap 能同时降低计算和维护成本。

易错点：overflow: hidden 不是“清除折叠专用属性”，它只是碰巧建立 BFC，并附带裁剪语义。

七、常见误区与追问

误区：所有方向的 margin 都会折叠。 经典折叠只发生在块格式化上下文的垂直方向，水平 margin 不会这样合并。
误区：相邻 margin 的结果永远取较大值。 有负值时要用最大正值加最小负值，全负时结果可能是负数。
误区：给子元素 display: inline-block 总能保持原布局。 它确实不参与普通块的垂直折叠，但也改变尺寸、基线和换行行为。
追问：Flex 容器里的项目会发生外边距折叠吗？ Flex 项之间以及项目与容器之间都不会按普通块规则折叠。
追问：clear 为什么会影响折叠？ 清除浮动可能在盒子边缘间引入 clearance，从而破坏可相邻折叠的条件。
追问：为什么推荐逻辑属性？ margin-block-start 比 margin-top 更准确表达块轴间距，在竖排书写模式下仍符合语义。

八、加强记忆

判断外边距折叠可以连续问四件事：是不是普通流块盒子、是不是块轴方向、两个边缘是否真正相邻、中间有没有边框、内边距、内容或新格式化上下文隔开。满足后再按“最大正值加最小负值”计算，而不是默认相加。解决时优先回到设计意图：列表间距用 gap，独立块环境用 flow-root，确有裁剪或滚动需求才用 overflow。这样既能解释现象，也不会为了修一个间距制造新的布局问题。

简化版

详细版