margin合并是指相邻块级元素的垂直margin自动合并为较大值而非相加，属CSS规范行为；常见于div、p、h1等元素间，可通过overflow:hidden、display:flow-root、padding替代或Flex/Grid布局阻止。
什么是 margin 合并（Margin Collapse）
相邻块级元素的垂直 有几种可靠方式，选哪种取决于布局意图和兼容性要求： 典型表现是两个 相比 立即学习“前端免费学习笔记（深入）”； 注意：IE 完全不支持 真正容易被忽略的是父子 margin 合并——它会让顶部空白“消失”得毫无征兆，调试时建议先检查父容器是否“透明”。margin 会自动合并成一个，取两者中较大的值，而不是相加。这是 CSS 规范定义的行为，不是 bug。常见于：、 等默认 display: block 的元素之间。怎么阻止 margin 合并
border、padding 或 overflow（非 visible），例如 overflow: hidden —— 最常用且无视觉副作用display: flow-root（现代推荐）或 float: left（老方案，影响布局流）padding 替代部分 margin：父容器设 padding-top，子元素去掉 margin-top
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 显式创建 BFCoverflow: hidden，display: flow-root 专为解决此类问题设计，语义清晰、无副作用，Chrome 58+/Firefox 59+/Safari 15.4+ 均支持。.bfc-container {
display: flow-root;
}
.bfc-container > * {
margin: 16px 0;
}flow-root，如需兼容 IE，仍需回退到 overflow: hidden 或伪元素清除法。
