前端Wiki/CSS/基础/盒模型

外边距合并

垂直方向上，两个块级元素的上下 margin 会发生合并（折叠）：正数取较大者，负数取绝对值较大者，正负混合则相加。这不是 bug，而是标准行为。

相邻兄弟：上一个元素的 margin-bottom 和下一个的 margin-top 叠在一起，只保留较大值（比如 30px 和 20px 合并成 30px，而不是 50px）。
父子合并：父元素没有 border、padding 或内容隔开时，第一个子元素的 margin-top 会「穿透」到父元素外面，看起来像父元素被顶下去了。

应对方法：统一使用一个方向的 margin（约定只用 margin-bottom）就能避开相邻合并；父子合并则给父元素加 overflow: hidden、或加少量 padding/border 隔开即可。另外注意：合并只发生在垂直方向，且仅限块级盒子的正常文档流中，flex 和 grid 容器内部不会合并。

本节要点垂直 margin 相邻取大不叠加；父子无间隔时 margin 会穿透；统一只用 margin-bottom、父级加 overflow 或 padding 可避免合并；flex/grid 内不发生合并。

CSS

<style>
  .box { width: 200px; height: 60px; }
  .box + .box { margin-top: 30px; }
  /* 上一个 box 的 margin-bottom: 50px
     与这里的 30px 合并，实际间距是 50px */
  .box:first-child { margin-bottom: 50px; }
  .parent {
    background: #eef; padding: 1px; /* 一点padding阻断父子合并 */
  }
  .child { margin-top: 40px; }
</style>
<div class="box">A（下50）</div>
<div class="box">B（上30）→ 间距50</div>
<div class="parent"><div class="child">子元素，margin不再穿透</div></div>

🔗 相关词条flex grid 文档流元素

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读