空元素的margin-bottom失效根本原因是外边距折叠，而非未生效；解决方法包括加padding-bottom:1px、border-bottom:1px transparent、min-height:1px，或改用gap、padding-bottom等更可靠方案。
空元素的 margin-bottom 不起作用，根本原因不是“没生效”，而是它被浏览器主动折叠（collapse）掉了——这是 CSS 规范定义的行为，不是 bug。
空块级元素的 margin 会参与折叠
当一个块级元素（如 <div>、<code><p></p>）内部没有任何内容（包括文本、换行、<br>、非空伪元素等），且未设置 height、min-height、padding 或 border 时，它的计算高度为 0。此时它的上下 margin 会与相邻兄弟或父容器边界发生垂直外边距合并（margin collapsing）。
常见表现：
- 空
<div class="spacer"></div>设置了margin-bottom: 40px，但下方紧邻一个<p>正文</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，实际间距只有<p></p>的margin-top（比如 16px），而不是 40px + 16px - 空元素在父容器末尾，
margin-bottom直接“消失”，父容器底部看不到额外空白
哪些操作能阻止 margin 折叠？
要让空元素的 margin-bottom 可见，必须打破它参与折叠的条件。关键在于让它“脱离”纯空状态或改变其格式化上下文：
- 加
padding-bottom: 1px（哪怕 1px）——立刻终止折叠，margin-bottom开始独立生效 - 加
border-bottom: 1px solid transparent—— 同样有效，且不引入可见边框 - 设
min-height: 1px—— 强制元素有“存在感”，margin 不再被折叠 - 用
display: inline-block替代默认block—— inline-block 元素不参与块级 margin 折叠 - 父容器触发 BFC（如
overflow: hidden）——可防止子元素 margin 与父容器边界折叠，但对兄弟间折叠无效
更推荐的替代方案：别依赖空元素的 margin
靠空元素撑开间距本身是反模式，容易受折叠、渲染差异、跨端兼容性影响。实际项目中应优先考虑：
- 给**下一个非空元素**加
margin-top（比给上一个空元素加margin-bottom更稳定） - 用父容器的
padding-bottom代替子元素的margin-bottom（语义清晰、无折叠风险） - 在 Flex 或 Grid 布局中直接使用
gap（现代、可靠、无需操心折叠） - 用伪元素生成占位：
::after { content: ""; display: block; margin-bottom: 40px; }—— 它不是空元素，不会被折叠
真正容易被忽略的是：即使你看到 margin-bottom 在 DevTools 的 Styles 面板里“亮着”，Computed 面板里也可能显示 0px 或标记为 “collapsed”。别信样式面板，要看 Computed 和实际布局效果。
