块 A mb 24 + 块 B mt 24，外层 overflow: hidden 建新 BFC
不折叠，24 + 24 = 48px，与设计稿一致。
产品与设计 · 布局基础
外边距Margin
margin 是元素边框外的空间；同一 BFC 内相邻块级元素的垂直 margin 会折叠、取大者，这是它和 padding 最大的区别。
拖动两块的垂直 margin，看折叠取大者
一把间距标尺。块 A 设 margin-bottom、块 B 设 margin-top，再切换相邻块级（折叠）与 BFC 隔离（不折叠）：实际间距长在标尺条的高度上，被折叠吃掉的量由红色徽章标出，结果落在物件上而不是只换页脚文案。
块 Amargin-bottom: 32px
块 Bmargin-top: 16px
实际间距 32px取 max(32, 16)，不叠加成 48px折叠 −16px
实际间距 32px。 相邻块级的垂直 margin 折叠，取 max(32, 16) = 32px，不叠加成 48px。原因：同一 BFC 内相邻块级的上下 margin 合并。折叠吃掉 16px；红色徽章标出的就是这部分。下一步：想要 48px 叠加，切到「BFC 隔离」。
从标尺上读出的规则
演示里的两个滑块和模式开关对应 margin 的几条核心规则。
- margin 在边框外：它推开邻居，不计入 width。演示里两块各自的声明值写在卡片上，间距由这些声明共同决定。
- 相邻块级垂直方向会折叠：同一 BFC 内，上一个的 margin-bottom 和下一个的 margin-top 合并成 max(a, b)，不是 a + b。标尺切到「相邻块级」时实际间距就是取大者。
- 取大者，不叠加：32 + 16 的实际间距是 32，不是 48；红色「折叠 −16px」徽章标出被吃掉的那部分。
- 隔离能阻止折叠：给容器建立新 BFC（overflow 非 visible、padding、border、inline-block 等），margin 就不再穿透；标尺切到「BFC 隔离」时间距回到 a + b。
- 水平方向和 flex/grid 不折叠：左右 margin 不会合并；flex/grid 容器改用 gap，更不会折叠。
什么时候会踩到折叠
出现这些信号时，先想是不是 margin 折叠在作怪。
- 相邻段落/区块间距「少了一截」：两块各设了上下 margin，结果比预期小，多半是取大者折叠。
- 父容器顶部被子元素顶开：父子 margin 也会穿透合并到父级外侧，看起来像间距漏到了外面。
- 想要可预测的叠加间距：区块组之间用 padding、border 或新 BFC 隔离，或改用 gap。
- 不适用：水平并排、flex/grid 容器内部、浮动或绝对定位元素之间——这些情境不折叠，别误判。
怎么用：从声明到实际间距
四步把两块的垂直间距说清楚，不靠「看起来差不多」。
- 写出两块各自的垂直 margin（谁负责上、谁负责下）。
- 判断是否同一 BFC 内相邻块级；是则实际间距 = max(a, b)。
- 若需要 a + b 叠加，用 padding、border、overflow 或新 BFC 把它们隔开，或换 gap。
- 检查父容器和首/末项的 margin 是否被折叠到外侧，避免布局「漏」出去。
正反例：同一对块想要 48px 间距
两块各设 margin-bottom 24、margin-top 24，期望间距 48px。只改一处：是否用 BFC 隔离。
块 A mb 24 + 块 B mt 24，同一文档流相邻
折叠取 max(24, 24) = 24px，比预期少一半；要恢复就只设单侧，或隔离容器。
快速自测
块 A margin-bottom: 40px、块 B margin-top: 10px，两块在同一 BFC 内上下相邻。它们之间的实际间距是多少，为什么不是 50px？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。