这是外边距折叠现象：子元素margin-top因父元素无padding、border或bfc而与父上边界合并，致父元素下移；最稳妥解法是用padding-top替代，根治方案为display:flow-root触发bfc。
这是外边距折叠，不是 bug
子元素设 margin-top 却让父元素“掉下去”，是 CSS 规范明确定义的外边距折叠（margin collapse）行为。它只发生在普通文档流中的块级元素之间、垂直方向上，且前提是父子间没有物理隔离层——即父元素既无 padding-top、也无 border-top、内容为空、也没触发 BFC。
此时浏览器会把子元素的 margin-top 和父元素的上边界“合并”，取较大值，并把这个值应用在父元素自身 margin 上。你看到的“父元素下移”，其实是它被自己的 margin 推开了。
常见误判现象包括：Computed 面板里父元素的 margin-top 显示为子元素的值；设计稿对齐总差几像素；明明只给子元素加了 margin-top: 20px，但父容器和上一个兄弟元素之间却空出了 20px。
用 padding-top 替代是最稳妥的写法
把原本写在子元素上的 margin-top: 20px，挪到父元素上写成 padding-top: 20px，就能彻底绕过折叠逻辑——padding 不参与外边距折叠，语义也更准确：这是容器内部留白，不是子元素向外的“推力”。
- 适合卡片、表单区块、模块化布局等需要统一内边距的场景
- 注意别混用：如果父元素已设
padding-top: 20px，子元素再加margin-top: 10px，结果就是 30px，容易误判间距来源 - 对像素敏感的布局（比如和设计稿严格对齐），要记得
padding会真实增加父元素高度
display: flow-root 是现代项目的根治方案
display: flow-root 是专为触发 BFC 设计的属性，无裁剪、无定位副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 都支持。它比 overflow: hidden 更干净，也不像 float 或 position: relative 那样干扰层叠上下文或布局流。
而 overflow: hidden 虽然兼容性好（IE8+），但它真正起作用的不是“隐藏”，而是触发 BFC；副作用很实在：下拉菜单、Tooltip、绝对定位箭头可能被裁掉；iOS Safari 还可能抑制弹性滚动。
如果父元素已有 overflow: auto 或 scroll，其实已经触发 BFC，不必额外加 hidden。
Flex 容器天然免疫这个问题
只要父元素是 display: flex 或 display: inline-flex，子元素的 margin-top 就不会导致父元素位移——Flex 布局有自己的对齐规则，不走传统外边距折叠逻辑。
哪怕只为了修复这一个问题，把 <div> 改成 <code>display: flex 也是合理选择：
- 记得补上
flex-direction: column（如果子元素是竖排），否则默认横排会打乱结构 - 如果父元素已有
width或height约束，flex不会影响这些尺寸 - 注意
align-items和justify-content可能改变子元素默认位置，需按需调整
真正容易被忽略的是：外边距折叠会向上穿透所有无隔离的祖先，所以必须在**离出问题子元素最近的那个父容器**上加防护，否则修了 A 层，B 层照样掉。
