margin坍塌是指相邻块级元素的垂直margin合并为较大值而非相加，是css规范行为；常见于兄弟、父子元素间，可通过bfc触发条件（如overflow、border、padding）或display:flow-root/flex/grid等方案规避。
什么是 margin 坍塌（margin collapse）
相邻块级元素的垂直 margin 会合并成一个，取两者中较大的那个值，而不是相加。这是 CSS 规范定义的行为，并非 bug。常见于父子元素、兄弟元素之间，尤其在没有边框、内边距或内容分隔时自动触发。
兄弟元素间 margin 坍塌的典型表现与修复
两个连续的 <p></p> 元素都设置了 margin-bottom: 20px 和 margin-top: 20px，实际间距只有 20px，而非预期的 40px。
- 用
padding替代部分margin（如只对第一个元素设margin-bottom，第二个设padding-top） - 给父容器设置
overflow: hidden、border或padding，打破 BFC 边界条件 - 使用
display: flow-root（现代方案，兼容性 ≥ Chrome 64 / Firefox 58 / Safari 15.4）
.container {
display: flow-root;
}
.item {
margin: 20px 0;
}
父子元素间 margin 坍塌的识别与规避
子元素的 margin-top「穿透」父容器顶部，导致父容器上边距失效——这是最易被误判为「CSS 没生效」的场景。
- 父元素有
border、padding或overflow非visible时，坍塌不发生 - 子元素改用
padding-top（前提是父容器背景/布局允许） - 父元素设
display: flex或display: grid，直接脱离常规文档流，阻断坍塌 - 避免对无内容空父容器依赖 margin 控制位置；优先用
flex的gap或定位替代
哪些情况不会触发 margin 坍塌
理解边界条件比死记规则更可靠：
立即学习“前端免费学习笔记（深入）”；
- 浮动元素、绝对定位元素、
inline-block元素的margin不参与坍塌 - 根元素（
）的margin永远不坍塌 - 有
clear清除浮动的兄弟元素之间，坍塌可能被中断 - 同一方向的多个 margin（如三个连续
margin-bottom）会逐级合并，最终只保留最大值
真正难处理的是嵌套深、动态渲染的列表或卡片组件——此时建议统一用 gap（Flex/Grid）或 CSS 自定义属性 + calc() 控制间距，从源头规避对 margin 的强依赖。
