这是css规范定义的外边距折叠行为：当父元素无border/padding/内容分隔时，子元素的margin-top会与父元素margin合并，导致视觉上“穿透”父容器。
为什么子元素的 margin-top 会“跑”到父元素外面
这不是 bug，是 CSS 规范定义的「外边距折叠（margin collapsing）」行为。当父元素没有 border、padding、inline content 或清除浮动等「隔离条件」，且子元素是块级、非浮动、非定位元素时，它的 margin-top 就会和父元素的 margin 合并，视觉上像“穿透”了父容器。
常见错误现象：div.parent 看起来没顶边距，但里面第一个 div.child 设了 margin-top: 20px，结果整个父容器向下偏移了 20px，而不是子元素在父容器内下移。
- 触发条件：父元素
margin-top为 0，子元素margin-top非零，且父元素无 border/padding/内容分隔 - 只发生在垂直方向（
margin-top/margin-bottom），水平方向margin-left/margin-right永不折叠 - flex/Grid 容器内部默认不发生折叠——这是最直接的规避路径
用 border-top 或 padding-top 隔离是最稳的方案
加 1px 透明边框或 0.1px 内边距，就能打断折叠逻辑，而且兼容性从 IE6 起就完全支持，不引入新布局模型，改动最小。
使用场景：老项目维护、需要保持 block 流布局、不能改 dom 结构或上级容器 display 类型时。
立即学习“前端免费学习笔记（深入）”；
-
border-top: 1px solid transparent—— 推荐，不影响盒模型尺寸（box-sizing: border-box 下更安全） -
padding-top: 0.1px—— 更轻量，但需确认父容器高度是否敏感 - 避免用
overflow: hidden应对，它可能意外裁剪阴影、下拉菜单或 position: absolute 子元素
改用 display: flex 是现代项目的首选解法
只要父元素设 display: flex，哪怕只有一行 flex-direction: column，子元素的 margin-top 就不再和父元素折叠。这不是“修复”，而是换了一套布局规则。
性能与兼容性影响：Flex 布局在所有现代浏览器中稳定；IE10+ 需加 -ms- 前缀（display: -ms-flexbox）；对渲染性能无明显负担。
- 不需要额外写子元素的
margin-top，改用margin-block-start或gap更语义化 - 如果父元素已有
align-items或justify-content，注意它们可能影响子元素对齐，需同步检查 - 慎用于内联上下文（如
span包裹的文本流），display: inline-flex可能改变行高表现
别踩 position: relative 的坑：它不解决折叠，还可能埋雷
给父元素加 position: relative 并不会阻止 margin 折叠——这是很多人试错后的误解。它只创建新层叠上下文，对盒模型计算无影响。
更麻烦的是：一旦后续加了 z-index 或子元素用了 position: absolute，这个 relative 就成了隐式定位上下文，可能导致绝对定位元素参照错位。
- 验证方法：打开浏览器开发者工具，看 computed 样式里
margin-top是否仍显示为合并后的值 - 如果真要用定位，优先考虑给子元素设
position: relative; top: 20px，但这属于“绕开”而非“解决” - 动画场景下，用
transform: translateY(20px)比top更高效，且不触发重排
真正难的不是选哪个方案，而是判断「谁该负责这段间距」——是父容器预留空间，还是子组件自我声明？前者用 padding/border，后者用 flex/gap。混用时最容易漏掉边界条件。