空元素的 margin-bottom 无效是因垂直外边距折叠而非 CSS 失效；修复需打断折叠条件，如用 padding-bottom/border-bottom 替代、改用 gap 或父容器 padding、或将间距加在下一个非空元素的 margin-top 上。
空元素的 margin-bottom 看似写了却“没效果”，不是 CSS 失效，而是被浏览器按规范折叠掉了——它根本没消失，只是和相邻 margin 合并为一个值。修复关键不是“强行让 margin 生效”，而是打断折叠条件或换更可靠的布局方式。
为什么空 <div> 的 margin-bottom 在 DevTools 里亮着却没间距？
因为该元素高度为 0（无内容、无 padding、无 border、无 height），它的上下 margin 会参与垂直外边距折叠：要么和下一个兄弟元素的 margin-top 合并，要么直接“穿出”父容器底部，导致空白不可见。
- 在 Chrome/Firefox 的 Computed 面板中，
margin-bottom常显示为0px或标记collapsed，别信 Styles 面板里的“高亮” - 折叠只发生在普通流中的块级元素，
display: inline-block、float、position: absolute元素不参与 - 伪元素（如
::after）生成的内容不算“空”，不会触发自身折叠
用 padding-bottom 或 border-bottom 替代最稳妥
加视觉上不可见但能打破折叠的“存在感”，比硬调 margin 更可控、兼容性好、无副作用。
-
padding-bottom: 1px：轻微增加盒尺寸，适合需要精确控制总高度的场景 -
border-bottom: 1px solid transparent：不改变盒尺寸（box-sizing: border-box下），比padding更轻量 - 避免写
border: 0或border: none——它们不满足“非零边框”条件，无法阻止折叠
改用 gap 或父容器 padding 彻底绕开问题
依赖空元素撑间距本身就是反模式。现代布局应优先用语义清晰、无折叠风险的方案。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器下：给父元素设
display: flex; flex-direction: column;，再加gap: 40px——gap永不折叠，且自动跳过首尾 - Grid 容器下：
display: grid; row-gap: 40px效果相同 - 若必须用块流：把间距加在**下一个非空元素**的
margin-top上，比给前一个空元素加margin-bottom稳定得多 - 父容器
padding-bottom代替子元素margin-bottom：语义明确（“容器预留底部空间”），完全规避折叠
真正容易被忽略的是：即使你用 display: flow-root 或 overflow: hidden 让父容器触发 BFC，也只能防止父子折叠，对兄弟元素间的空元素折叠无效——得看具体是哪一环在塌陷，不能套模板解。
