触发margin collapsing的元素仅限普通文档流中的display: block元素，且仅发生在垂直方向；浮动、绝对定位、行内、flex item、grid item及inline-block均不参与。
哪些元素会触发margin collapsing
只有处于普通文档流中的display: block元素，在垂直方向（上下）的margin-top和margin-bottom才可能合并。浮动元素、绝对定位元素、行内元素、flex item、grid item 都不参与。
-
display: inline-block不会，哪怕它看起来是“块状”的 -
float: left或position: absolute直接退出普通流，margin照常存在，不合并 - 父元素没有
border、padding、inline content且子元素是第一个/最后一个时，父子margin也可能塌陷
为什么相邻兄弟块的上下margin会合并
浏览器把两个相邻块级元素的垂直外边距“选一个最大值”来渲染，不是相加，也不是忽略，而是取max(margin-top, margin-bottom)。这是CSS规范定义的行为，目的是避免段落间间距失控。
- 正负margin同时存在时，会代数相加（比如
margin-bottom: 20px+margin-top: -10px→ 实际间隔10px） - 如果一个是
auto（如margin: auto），则不参与合并，该方向margin视为0 - 百分比margin按包含块计算后参与合并，不是按自身尺寸
怎么快速判断是否发生了margin collapsing
最直接的办法：给疑似塌陷的元素加outline: 1px solid red（outline不占布局空间），再对比视觉间距与你写的margin值是否一致。如果明显小于两者之和，大概率塌陷了。
- 开发者工具里看Computed面板，
margin-top/margin-bottom显示的值可能是合并后的结果，但原始声明仍可见 - Chrome DevTools 的Layout面板勾选“Show layout shifts”能高亮重排区域，间接提示塌陷影响范围
- 用
getComputedStyle(el).marginTop拿到的是计算后值（已合并），不是你写的原始值
绕过margin collapsing的常用手段
不需要消灭它，但得知道什么时候该干预。最稳妥的方式是只控制一端margin（比如统一用margin-bottom），或用非margin方案替代。
- 给父容器加
border-top: 1px solid transparent或padding-top: 0.1px，打破父子塌陷条件 - 用
display: flow-root（现代写法）或overflow: hidden（兼容老浏览器）创建BFC，隔离内部margin - 改用
gap（flex/grid容器）代替margin做间距，完全规避塌陷问题 - 慎用
margin: 0 auto在垂直方向——它不会居中，还可能意外参与合并
真正容易被忽略的是：margin collapsing不是bug，是设计行为；但很多人把它当bug去“修复”，结果加了一堆overflow: hidden导致滚动截断或阴影裁剪。先确认是否真需要干预，再选最小侵入的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
