不是bug，是CSS规范定义的外边距合并行为：当父元素无border、padding或BFC隔离时，子元素margin-top会与父元素上边界合并，导致父元素位置下移而高度不增长。
父元素无法被子元素的 margin 撑开，不是 bug，是 CSS 规范明确要求的外边距合并（Margin Collapse）行为——只要父子间没 border、padding 或 BFC 隔离，子元素的 margin-top 或 margin-bottom 就会“穿透”父容器，和父元素自身边界合并，导致父容器高度不增长、位置却偏移。
为什么子元素设了 margin-top，父元素却往下跑了？
这是父子级外边距合并的典型表现：当父元素没有 border-top、padding-top，且 overflow 是默认的 visible 时，子元素的 margin-top 会直接和父元素的上边界（甚至 body 的 margin）合并。你写的是 margin-top: 40px，但浏览器把它算在了父元素“外面”，所以父元素整体下移，内部高度却仍是 0。
- 只发生在普通文档流中的块级元素之间
- 仅限垂直方向：
margin-top/margin-bottom合并；margin-left/margin-right永远不合并 - 合并值取较大者：比如父元素隐式
margin-top: 0，子元素margin-top: 40px→ 实际生效 40px，但归属在父容器“上方” - 负值也参与计算：子元素
margin-top: -10px+ 父元素margin-top: 25px→ 合并为15px
怎么快速判断是不是外边距合并导致的塌陷？
打开开发者工具（F12），选中父元素，在右侧 Computed 面板里看 margin-top 和 margin-bottom 的实际数值；再对比 Styles 面板里你写的规则是否被划掉、或数值明显小于预期（比如写了 20px + 20px 却只显示 20px）。如果父元素顶部/底部空白远大于其内容高度，基本就是合并了。
- 父元素高度为 0，但页面上有大片空白
- 子元素明明有
margin-bottom，下方元素却紧贴着它，没留空 -
<h1></h1>套在<div> 里，<code><div> 边框紧贴 <code><h1></h1>文字，顶部没撑开真正靠谱的阻断方式，别再无脑用
overflow: hiddenoverflow: hidden虽快，但会意外裁剪阴影、下拉菜单、position: absolute子项或动画溢出部分。更安全的选择是：立即学习“前端免费学习笔记（深入）”；
-
display: flow-root：专为创建 BFC 设计，无副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 全支持 -
padding-top: 1px或padding-bottom: 1px：极小内边距物理隔开，兼容性无敌 -
border-top: 1px solid transparent：透明边框同样阻断合并，比 padding 更轻量（不增加盒模型高度） - 改用
display: flex或display: grid父容器：子项自动脱离 margin 合并逻辑，顺便获得现代布局能力
兄弟元素间
margin为啥只生效一个？连续两个
<div>，一个设 <code>margin-bottom: 20px，一个设margin-top: 30px，实际间距是30px而非50px——因为它们的垂直外边距直接接触，触发了兄弟级合并。- 解决办法同上：任一元素加
border、padding，或让父容器变成flex/grid，或给父容器设display: flow-root - 注意：浮动（
float）、绝对定位（position: absolute）、inline-block也能阻止，但会破坏文档流，不推荐作为首选 - Flex/Grid 容器下的直接子元素，完全不发生 margin 合并，这是它们脱离常规流的附带好处
最易被忽略的一点：不要依赖“看不见的
margin”做关键布局。它在嵌套层级加深、框架封装、或某些 CSS-in-JS 库生成样式时极易失效。优先用padding控制父容器内部留白，或用gap替代子项margin，才是长期稳定的解法。 -
