当两个垂直相邻的块级元素分别设置 `margin-bottom` 和 `margin-top` 时，它们的外边距不会简单相加，而是发生“合并（collapse）”，最终间距取两者中的较大值——本例中为 `10px`。
在 CSS 盒模型中，外边距合并（Margin Collapsing） 是一个基础但常被误解的重要规则。它仅发生在普通文档流中的块级元素之间，且仅影响垂直方向（margin-top 与 margin-bottom），水平方向的 margin-left/margin-right 永不合并。
✅ 合并发生的典型场景
- 相邻兄弟元素（如 后紧跟另一个）
- 父子元素间（无边框、内边距、清除浮动等阻断条件时，父元素的 margin-top 与首个子元素的 margin-top 合并；或父元素 margin-bottom 与末子元素 margin-bottom 合并）
? 本题解析
假设 HTML 结构如下：
<div class="box-1">Element One</div> <div class="box-2">Element Two</div>
对应 CSS：
.box-1 { margin-bottom: 10px; } .box-2 { margin-top: 5px; }尽管直观计算为 10px + 5px = 15px，但根据 CSS 规范，这两个垂直外边距会合并为单个外边距，其大小为二者中的最大值：max(10px, 5px) = 10px。
立即学习“前端免费学习笔记（深入）”；
? 关键依据：MDN 官方文档 明确指出：“当相邻外边距均为正数时，合并后的外边距高度等于两者中较大的那个。”
⚠️ 注意事项
- 合并不适用于浮动元素、绝对定位元素、inline 元素或 flex/grid 容器的直接子项；
- 可通过以下任一方式阻止合并：
- 给父容器添加 border-top 或 padding-top；
- 设置父容器 overflow: hidden（或非 visible 值）；
- 使用 display: flow-root（现代推荐，创建 BFC）；
- 将元素转为 flex 或 grid 子项。
? 总结
外边距合并不是“bug”，而是 CSS 为避免段落、标题等连续块元素间出现过大的意外空白而设计的默认行为。理解它，是精准控制布局间距的关键一步。遇到“间距比预期小”的情况，第一反应应是检查是否发生了 margin collapse——而不是盲目增加数值。
