空块元素自身上下外边距会折叠为一个值，典型表现为无内容的<div>或<p>显示意外空白；修复方式包括设min-height: 1px、加透明边框border-top: 1px solid transparent或padding-top: 1px，或从源头避免渲染空元素。
空标签本身不直接导致外边距重合（collapse），真正触发 collapse 的是「空的块级元素」——即没有内容、无 padding、无 border、height 为 auto 的 <div> 或 <p> 等。它的 margin-top 和 margin-bottom 会相互折叠，最终只保留一个值。
空块元素自身 margin 折叠怎么识别
典型现象：页面中有个看似“什么都没写”的 <div>，但上下却有意外空白，inspect 元素发现它明明没设 margin，可 computed 样式里 margin-top 和 margin-bottom 都显示非零值，且实际间距远小于两者之和。
- 常见于 CMS 输出的空段落：
<p></p> - 或 JS 动态插入后未填充内容的容器：
<div class="card"></div> - 即使写了
margin: 0，只要盒模型为空且未触发 BFC，仍可能受父级影响间接参与 collapse
给空元素加 height 或 min-height 最快见效
这是最直白、兼容性最好的破局方式，不依赖 BFC，也不改布局流。
-
height: 0不够 —— 它仍满足“空块”条件，collapse 继续发生 - 必须设
min-height: 1px或height: 1px，哪怕不可见，也打破规范中“无高度内容”的判定 - 如果该元素本应撑开（比如加载占位符），
min-height: 24px比硬写height更安全 - 注意：不要用
line-height: 1px替代 —— 对纯空块无效，因为没行框生成
用 border 或 padding 打断 collapse 条件
规范明确：只要中间存在 border、padding 或内容，collapse 就不成立。透明边框成本最低。
立即学习“前端免费学习笔记（深入）”；
-
border-top: 1px solid transparent—— 视觉无感，100% 打断自身 collapse -
padding: 0.1px 0—— 比 border 更轻量，但 IE 不支持 sub-pixel，稳妥起见用padding-top: 1px - 慎用
overflow: hidden—— 虽然能创建 BFC，但若后续往这空 div 里 append tooltip 或 dropdown，会被裁掉 - 别给空元素设
display: inline-block—— 它会引入 baseline 对齐间隙，带来新问题
从源头避免空块生成
前端同学常忽略：collapse 是症状，空块才是病灶。与其补样式，不如堵住源头。
- 模板层加判空逻辑：
{% if content %}<p>{{ content }}</p>{% endif %} - JS 插入前检查：
if (text.trim()) el.textContent = text，否则el.remove() - CSS 层面可用
:empty伪类兜底：div:empty { display: none; }，但注意它不阻止 collapse 发生，只是隐藏——已 collapse 的间距还在 - 组件库中统一用
renderEmptyprop 控制是否渲染空容器，比样式 hack 更彻底
真正容易被忽略的是：空块 collapse 不仅影响自身，还会连带破坏父容器的父子 collapse 判定。比如一个空 <div> 在父容器底部，它会让父容器的 margin-bottom 和自己的 margin-bottom 合并，进而把整个父块“上提”。所以修复时得看它在 DOM 中的位置，不能只盯单个元素。
