这不是bug，是CSS规范定义的垂直外边距合并行为：当父元素无border、padding且未触发BFC时，子元素margin-top会与其上边界对齐，导致视觉上“顶开”父元素；解决核心是让父元素形成BFC，推荐display:flow-root或overflow:hidden。
为什么子元素的 margin-top 会“顶开”父元素
这不是 bug，是 CSS 规范明确规定的 margin 合并行为：当父元素没有 border、padding 或 BFC 触发条件，且子元素是标准流中的块级元素时，子元素的 margin-top 会与父元素的上边界“对齐”，实际效果是父子一起下移。此时父元素 computed 的 margin-top 值常为 0，而空白高度 = 子元素设置的 margin-top 值。
- 检查方式：给父元素临时加
border: 1px solid red或background: #eee，看子元素是否“贴着”父顶部 - 关键前提：该现象只发生在普通文档流的块级元素之间，
flex/grid/float/position: absolute容器内不触发 - 别试图用
margin-top: 0覆盖子元素——它不解决合并逻辑，只是掩盖症状
阻止父子塌陷最稳妥的 4 种写法
核心目标是让父元素形成独立的 BFC（块级格式化上下文），从而隔离 margin 计算。以下写法按推荐优先级排序：
-
overflow: hidden：兼容性好（IE8+），轻量，但若父元素内有position: absolute子项且需溢出显示，可能意外裁剪 -
display: flow-root：现代标准写法，语义清晰，专为创建 BFC 设计，Chrome 64+/Firefox 62+ 支持，无副作用 -
padding-top: 1px：简单直接，但会略微增加父元素高度；若父元素高度固定，需同步调整子元素尺寸 -
border-top: 1px solid transparent：视觉无感，不占额外空间（配合box-sizing: border-box更安全）
相邻兄弟元素的 margin 合并怎么破
两个上下紧邻的块级元素（如 <p>、<div>）各自设了 margin-bottom 和 margin-top，最终间距取最大值，不是相加。这其实是排版友好设计，但有时需要精确控制。
- 最常用解法：统一单边距，比如全部只用
margin-bottom，避免上下同时设 margin - 包裹容器法：用外层
<div>包住兄弟组，再给外层设 padding 或 margin - 伪元素隔离：
.wrapper::before { content: ""; display: table; }，可打断合并流，但 IE 不支持::before在某些场景 - 注意：Flex/Grid 容器内的直系子项之间不会发生兄弟塌陷，但子项内部的块级后代仍可能塌陷
哪些方案看着能用，其实埋了雷
有些写法短期生效，但容易在后续迭代中引发新问题：
立即学习“前端免费学习笔记（深入）”；
-
float: left或position: absolute：虽能触发 BFC，但会让父元素脱离文档流，影响后续布局和高度计算 - 仅靠重置子元素
margin-top: 0：没切断合并机制，一旦其他样式注入或组件复用，塌陷立刻重现 -
display: inline-block：父元素变成行内块后，底部默认有基线间隙，需额外处理vertical-align或字体大小 - 用
gap替代 margin：gap 是 Flex/Grid 布局属性，不参与 margin 合并，但它不能用于非 Flex/Grid 容器，也不能替代 margin 实现“与外部元素的间距”
真正要警惕的是把塌陷当成“样式没生效”去硬调数值——它背后是渲染机制，不理解原理，改十次还是会掉坑里。
