margin合并是指相邻块级元素的垂直margin自动合并为较大值而非相加，属CSS规范行为；常见于div、p、h1等元素间，可通过overflow:hidden、display:flow-root、padding替代或Flex/Grid布局阻止。
什么是 margin 合并（Margin Collapse）
相邻块级元素的垂直 margin 会自动合并成一个，取两者中较大的值，而不是相加。这是 CSS 规范定义的行为，不是 bug。常见于：<div>、<p>、<h1> 等默认 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 看起来“没生效”
典型表现是两个 <p> 元素都设了 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+ 均支持。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
.bfc-container {
display: flow-root;
}
.bfc-container > * {
margin: 16px 0;
}注意：IE 完全不支持 flow-root，如需兼容 IE，仍需回退到 overflow: hidden 或伪元素清除法。
真正容易被忽略的是父子 margin 合并——它会让顶部空白“消失”得毫无征兆，调试时建议先检查父容器是否“透明”。
