margin合并是指相邻块级元素的垂直margin自动合并为较大值而非相加，属CSS规范行为；常见于div、p、h1等元素间，可通过overflow:hidden、display:flow-root、padding替代或Flex/Grid布局阻止。

什么是 margin 合并（Margin Collapse）

相邻块级元素的垂直 margin 会自动合并成一个，取两者中较大的值，而不是相加。这是 CSS 规范定义的行为，不是 bug。常见于：

、

、

等默认 display: block 的元素之间。

怎么阻止 margin 合并

有几种可靠方式，选哪种取决于布局意图和兼容性要求：

• 给父容器设置 border、padding 或 overflow（非 visible），例如 overflow: hidden —— 最常用且无视觉副作用
• 让其中一个元素触发 BFC（块级格式化上下文），比如加 display: flow-root（现代推荐）或 float: left（老方案，影响布局流）
• 改用 padding 替代部分 margin：父容器设 padding-top，子元素去掉 margin-top
• 使用 Flex 或 Grid 布局：在 display: flex 或 display: grid 容器内，子项的 margin 不会合并

.container {
  overflow: hidden; /* 阻止子元素 margin 合并 */
}
.item {
  margin: 20px 0;
}

为什么有时 margin 看起来“没生效”

典型表现是两个

元素都设了 margin-bottom: 20px，但实际间距只有 20px 而不是 40px。这是因为它们的 margin-bottom 和 margin-top 合并了。

• 只发生在**垂直方向**（margin-top/margin-bottom），水平 margin 永远不合并
• 父子间也会合并：若父元素没 border/padding，且子元素有 margin-top，该 margin 会“溢出”到父元素外边距上
• margin: auto 在块级元素上不参与合并，但行为特殊（常用于居中）

现代推荐写法：用 flow-root 显式创建 BFC

相比 overflow: hidden，display: flow-root 专为解决此类问题设计，语义清晰、无副作用，Chrome 58+/Firefox 59+/Safari 15.4+ 均支持。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

.bfc-container {
  display: flow-root;
}
.bfc-container > * {
  margin: 16px 0;
}

注意：IE 完全不支持 flow-root，如需兼容 IE，仍需回退到 overflow: hidden 或伪元素清除法。

真正容易被忽略的是父子 margin 合并——它会让顶部空白“消失”得毫无征兆，调试时建议先检查父容器是否“透明”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！