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 对多行文本的实际影响
假设你有一组段落：
<p>第一段</p> <p>第二段</p> <p>第三段</p>
每个
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 和美观。
