当两个垂直相邻的块级元素分别设置 `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：


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载

.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——而不是盲目增加数值。