margin collapse 是指相邻块级元素的垂直外边距合并为较大者，影响多行文本间距。多行文本常由多个块级元素（如 p 标签）构成，这些元素间的 margin 会合并，导致段落间实际间距小于预期。例如，默认上下 margin 均为 1em 的段落，相邻时仅产生 1em 间距。此外，首段与容器顶部或末段与容器底部可能发生父子 margin 合并，造成间距“溢出”。为精确控制布局，可采用只设置 margin-bottom、使用 padding 替代 margin、父容器添加 overflow: hidden 触发 BFC，或改用 flexbox/grid 布局等方式避免合并问题。理解该机制有助于实现更可控的文本排版。
在使用 CSS 布局时，margin collapse（外边距合并）是一个常见但容易被忽视的机制。它主要发生在块级元素之间，当它们的垂直 margin 相邻时会合并为一个 margin，取其中较大的那个值。这个机制对多行文本的影响并不直接，但理解它有助于避免布局中出现意外的间距问题。
什么是 margin collapse？
margin collapse 指的是两个垂直相邻的块级元素的 margin 会发生合并。比如：
- 相邻兄弟元素：p 和 p 之间的上下 margin 会合并
- 父元素与第一个/最后一个子元素
- 空块级元素的上下 margin
这种合并只发生在常规文档流中的块级元素之间，且不适用于行内块、浮动或绝对定位元素。
多行文本通常由哪些元素构成？
多行文本一般由以下方式呈现：
立即学习“前端免费学习笔记（深入）”；
- 多个 段落（
p
标签） - 换行标签
br
- 包含在
div
或span
中的纯文本 - 列表项（
li
）
其中，只有块级元素（如
p）才参与 margin collapse。因此，如果多行文本是通过多个
p实现的，就会受到 margin 合并影响。
margin collapse 对多行文本的实际影响
假设你有一组段落：
第一段
触发式加载精美特效企业网站源码1.0.0下载触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
第二段
第三段
每个
p默认有上下 margin（例如 1em）。由于 margin collapse，相邻段落之间的实际间距并不是 2em，而是 1em —— 因为上下 margin 合并了。
这意味着：
- 段落间的视觉间距比预期小
- 若手动增加 margin，需考虑合并行为，否则可能达不到想要的效果
- 首段和容器顶部、末段和容器底部的间距也可能因父子 margin collapse 出现“溢出”现象
如何控制或避免 margin collapse 影响文本布局？
如果你希望精确控制多行文本的间距，可以采取以下方法：
- 使用 padding 而非 margin 来分隔内容（padding 不会合并）
- 给父容器设置
overflow: hidden
阻断父子 margin 合并 - 使用
flexbox
或grid
布局，它们默认不发生 margin collapse - 将文本容器设为
display: inline-block
或其他非块级格式化上下文触发方式 - 统一使用一种方向的 margin，例如只设置
margin-bottom
，避免上下同时设置
基本上就这些。虽然 margin collapse 不改变文本本身，但它会影响多行文本块之间的间距表现。合理利用或规避这一机制，能让排版更 predictable 和美观。
