这是css外边距合并现象：子元素margin-top与父容器上边缘合并导致父容器下移；仅发生在垂直方向块级元素间，合并值取较大者；可通过computed面板验证，推荐用display:flow-root或padding/border阻断。
为什么 margin-top 一设，父容器就下移了
这不是样式没生效，是 CSS 规范明确规定的外边距合并行为：当子元素紧贴父容器顶部、且父容器没有 border、padding 或其他分隔内容时，子元素的 margin-top 会“穿透”父容器，直接与父容器上边缘（甚至 body 的 margin）合并。结果就是你写了 margin-top: 40px，但整块父容器被顶下去 40px。
只发生在普通文档流中的块级元素之间，仅限垂直方向（margin-top/margin-bottom），margin-left/margin-right 永远不合并；合并值取较大者，负值也参与计算。
怎么快速判断是不是 margin 合并惹的祸
打开开发者工具（F12），选中出问题的元素，在右侧 Computed 面板里看 margin-top 和 margin-bottom 的实际生效值；再对比 Styles 面板里你写的样式是否被划掉或数值明显不对。
- 看到“本该 20px + 15px 却只显示 20px” → 兄弟元素间合并
- 父容器顶部空白远大于预期，且子元素
margin-top在 Computed 里显示为生效值，但父容器位置异常 → 父子合并 - 空
<div> 上设了 <code>margin: 20px 0，上下只留出 20px 而非 40px → 空元素自身合并真正靠谱的阻断方式，不是 overflow:hidden 一刀切
overflow: hidden虽然常用，但可能意外裁剪阴影、下拉菜单或动画溢出内容。更稳妥的选择是：-
display: flow-root—— 专为创建无副作用 BFC 设计，现代浏览器全覆盖（Chrome 64+ / Firefox 59+ / Safari 15.4+ / Edge 79+） -
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
两个连续
<p></p>都设了margin-bottom: 20px和margin-top: 20px，实际间距只有 20px，不是 bug，是规范行为。- 统一单边距：只对第一个元素设
margin-bottom，第二个设padding-top - 改用
gap：在display: flex或display: grid容器中，直接用gap: 20px，语义清晰、无合并风险 - 包裹一层容器：给兄弟元素加个外层
<div class="list">，再对它设 <code>display: flow-root嵌套深、动态渲染的卡片列表，建议从源头规避对
margin的强依赖——用gap或 CSS 自定义属性 +calc()控制间距，比反复调试margin值更稳定。
-
