外边距折叠

普通块级流中的相邻垂直外边距可能折叠成一个外边距，而不是简单相加。相邻兄弟、父子首尾和空块盒有不同条件；浮动、绝对定位、建立 BFC 或使用边框和内边距都可能阻止折叠。

.first { margin-block-end: 32px; }
.second { margin-block-start: 20px; }

在满足折叠条件时，两者之间通常得到较大的 32px，不是 52px。负值、正负混合和空块的规则更复杂，排查时要先画出块格式化上下文和相邻边界，不要直接给某个元素加随机 padding。

实验与练习

建立两个垂直块，分别设置 32px 和 20px 的外边距，用开发者工具观察间距。再给父元素加 padding-block-start: 1px、display: flow-root 或边框，比较折叠是否消失，并解释是哪条条件改变了。

可运行微实验：先测量再改变约束

把示例放入 320px 宽的容器，打开 Computed/Layout 面板记录 content、padding、border、margin、主轴尺寸和网格线。每次只改变一个属性：box-sizing、min-width、flex-basis、grid-template-columns 或定位方式。记录元素自身尺寸、邻居位置和是否溢出，解释是哪条约束改变了结果。

常见错误

• 认为所有 margin 都会相加。
• 用固定数值补丁掩盖父子外边距折叠。
• 不区分块流、Flex/Grid 容器和绝对定位元素。

继续阅读

盒模型建立后，下一篇进入一维布局：Flexbox 容器与项目。

练习

1. 用最小输入复现“外边距折叠”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案