这不是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></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div>）各自设了 <code>margin-bottom 和 margin-top，最终间距取最大值，不是相加。这其实是排版友好设计，但有时需要精确控制。
- 最常用解法：统一单边距，比如全部只用
margin-bottom，避免上下同时设 margin - 包裹容器法：用外层
<div> 包住兄弟组，再给外层设 padding 或 margin <li>伪元素隔离：<code>.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 实现“与外部元素的间距”
哪些方案看着能用，其实埋了雷
有些写法短期生效，但容易在后续迭代中引发新问题：
真正要警惕的是把塌陷当成“样式没生效”去硬调数值——它背后是渲染机制，不理解原理，改十次还是会掉坑里。
