这是CSS外边距合并行为：父子元素间无border/padding时，子元素margin-top会与父元素上边缘合并，导致父容器下移；仅发生在垂直方向块级元素间，合并值取较大者，负值参与计算。
为什么 margin-top 一设，父元素就被顶下来了？
这不是 bug，是 CSS 规范明确规定的外边距合并（margin collapse）行为：当父子元素间没有 border、padding 或其他分隔内容时，子元素的 margin-top 会“穿透”父容器，直接与父元素的上边缘（甚至 body 的 margin）合并。结果就是——你写了 margin-top: 40px，但父容器整体下移了 40px，视觉上像被“顶开”了一样。
- 只发生在普通文档流中的块级元素之间
- 仅限垂直方向（
margin-top/margin-bottom），margin-left/margin-right永远不合并 - 合并值取两者中**较大者**（如
margin-top: 20px+margin-bottom: 30px→ 实际间距 = 30px） - 负值参与计算：比如
margin-bottom: -10px和margin-top: 25px合并后为 15px
怎么一眼判断是不是 margin 合并导致的错位？
打开开发者工具（F12），选中出问题的元素，在右侧 Computed 面板里看 margin-top 和 margin-bottom 的实际生效值；再对比 Styles 面板里你写的样式是否被划掉或数值明显不对。如果看到“本该 20px + 15px 却只显示 20px”，或者父容器顶部空白远大于预期，基本就是合并了。
- 相邻兄弟元素间：两个
div垂直排列，一个设margin-bottom，一个设margin-top - 父子嵌套：子元素无 border/padding，且紧贴父元素顶部/底部
- 空元素自身：比如
，上下 margin 直接叠成一个 20px
真正靠谱的 4 种阻断方式（别再用 overflow:hidden 一刀切）
overflow: hidden 虽然常用，但它可能意外裁剪阴影、下拉菜单或动画溢出内容。更稳妥的选择是：
-
display: flow-root—— 专为创建 BFC 设计，无副作用，现代浏览器全覆盖（Chrome 64+/Firefox 59+/Safari 15.4+） -
padding-top: 1px（或padding-bottom: 1px）—— 在父元素上加极小内边距，物理隔开 margin，兼容性无敌 -
border-top: 1px solid transparent—— 透明边框同样能终止合并，比 padding 更轻量（不增加盒模型高度） - 改用
display: flex或display: grid父容器 —— Flex/Grid 项目默认不参与 margin 合并，顺便获得现代布局能力
哪些“解法”看着快，其实埋了雷？
有些写法短期有效，长期维护容易翻车：
立即学习“前端免费学习笔记（深入）”；
-
float: left：确实能破合并，但会让元素脱离文档流，影响后续布局逻辑 -
position: absolute：完全脱离流式排版，响应式适配成本陡增 - 只清一边 margin（如
margin-top: 0）：治标不治本，换一组元素又出问题 - 滥用
* { margin: 0; padding: 0; }：重置全局反而掩盖真实结构问题，调试更困难
真正要盯住的，是“有没有物理分隔”和“是否还在普通文档流里”——这两点没理清，再多 hack 也挡不住下次合并突然出现。
