父子 margin 塌陷是 css 2.1 规范定义的 margin collapse 行为，非浏览器 bug；需同时满足父为普通流块级、无 border/padding/内容、未触发 bfc，且子为首个块级元素并设 margin-top。
父子元素 vertical margin 塌陷的本质是 margin collapse 规范行为
这不是浏览器 bug，而是 CSS 2.1 规范明确定义的 margin-collapse（外边距折叠）机制：当父元素处于普通文档流、display: block、且未触发 BFC 时，其第一个子元素的 margin-top 会与父元素自身的上外边距（或包含块边界）合并，取二者中较大值作为最终渲染间距。
什么条件下一定会触发父子 margin 塌陷
必须同时满足以下全部条件：
- 父元素是普通流中的块级元素（
display: block，非flex/grid/inline-block等） - 父元素没有
border-top（哪怕border-top: 1px solid transparent也不行 —— 等等，这句错了，见下条）、没有padding-top、没有内容（空 div 也算无内容） - 父元素未触发 BFC（即未设置
overflow: hidden、display: flow-root、float等） - 子元素是第一个普通流块级子元素，且设置了
margin-top
只要缺一个，塌陷就不会发生。比如给父元素加 border-top: 1px solid transparent，哪怕视觉不可见，也立刻打断合并逻辑 —— 因为规范只认“是否存在 border”，不认颜色是否透明。
为什么 overflow: hidden 能解决但不推荐滥用
overflow: hidden 会强制父元素创建 BFC，从而隔离内部 margin 与外部环境，子元素的 margin-top 就不再“穿透”到父容器边界。但它不是无代价的：
- 可能意外裁剪
position: absolute子元素（如下拉菜单、Tooltip） - 会隐藏
box-shadow的扩展部分（尤其带模糊半径时） - 在高 DPI 屏幕或缩放场景下，
overflow: auto可能无故出现滚动条 - 语义错位：你本意是控制间距，结果却靠“隐藏溢出”来实现
真正干净的替代是 display: flow-root —— 它专为创建 BFC 设计，无裁剪、不干扰定位、现代浏览器（Chrome 64+/Firefox 59+/Safari 15.4+）已全面支持，仅 IE 完全不兼容。
现代项目里最省心的根治方式：用 gap 替代 margin
如果你控制的是容器本身（如卡片列表、表单字段组），直接把父元素设为 display: flex 或 display: grid，再用 gap 控制子项间距：
.list {
display: flex;
flex-direction: column;
gap: 16px;
}
gap 是布局容器原生的间距接口，完全不参与 margin collapse，且支持响应式单位（如 gap: clamp(8px, 2vw, 16px)）。注意两点：
- 别在 flex/grid 容器自身再设
margin来“补空隙”，那又绕回老问题 - 确保
flex-direction: column（垂直方向生效前提），或对 grid 显式设置grid-auto-rows
真正容易被忽略的是：塌陷只发生在普通文档流块级盒之间。一旦你用 display: flex 包裹子元素，父子塌陷就消失了 —— 但那个子元素如果内部还有两个普通块级子元素，它们之间仍可能塌陷。问题从来不在“怎么修”，而在“是否意识到它只在特定流中存在”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
