当两个垂直相邻的块级元素分别设置 `margin-bottom` 和 `margin-top` 时，其实际间距并非二者之和，而是取其中较大值——这一现象称为“外边距折叠（margin collapse）”，是 css 盒模型的关键规则之一。
在标准文档流中，垂直方向上相邻的块级元素之间的外边距会发生折叠，即浏览器不会将两个外边距简单相加，而是合并为一个外边距，其大小等于两者中的最大正值（若均为负值则取最小值；一正一负则相加后取绝对值较大者，但本例不涉及）。
例如，题目中：
- 元素一设置了 margin-bottom: 10px
- 元素二设置了 margin-top: 5px
二者垂直相邻，且处于同一 BFC（块级格式化上下文）中，满足外边距折叠条件。此时浏览器会将这两个外边距“折叠”为单个 10px 的空白间距，而非 10px + 5px = 15px。
✅ 正确答案：10px
立即学习“前端免费学习笔记（深入）”；
你可以通过以下 HTML/CSS 快速验证：
<div style="margin-bottom: 10px; background: #e0f7fa;">元素一</div> <div style="margin-top: 5px; background: #ffecb3;">元素二</div>
在开发者工具中查看二者之间的实际间距，会发现 computed margin-bottom 和 margin-top 均被折叠，仅保留 10px 的分隔距离。
⚠️ 注意事项：
- 外边距折叠仅发生在块级元素的垂直方向（margin-top/margin-bottom），水平方向（margin-left/margin-right）永不折叠；
- 折叠前提是元素处于同一 BFC 且无隔离（如 border、padding、clear、inline content、height 等阻断因素）；
- 父子元素之间也可能发生折叠（如父元素无 border/padding，子元素 margin-top 会“溢出”至父元素顶部），这是另一类常见场景；
- 使用 display: flow-root、overflow: hidden 或 contain: layout 可为父容器创建新的 BFC，从而阻止折叠。
掌握外边距折叠机制，不仅能解释此类面试题，更是精准控制布局、避免意外空白的关键基础。建议在复杂布局中主动检查是否意外触发了折叠，并善用 BFC 隔离来实现预期间距。
