空 div 的上下 margin 会自我合并，导致“凭空”撑开空白；确认方法是 inspect 元素并查看 computed 样式中 margin-top 和 margin-bottom 是否均为非零且无显式设置；推荐用 min-height: 1px 破解，因其兼容性好、副作用小。
空 <div> 的上下 margin 会自我合并（collapse），导致它明明没设 margin 却在页面上“凭空”撑开一段空白；这不是 bug，是 CSS 规范行为——只要它是 height 为 auto、无内容、无 padding、无 border 的块级元素，它的 <code>margin-top 和 margin-bottom 就会叠成一个值。
怎么确认是空 div 自身 margin 合并？
打开开发者工具 inspect 这个 <div>，看 computed 样式里的 <code>margin-top 和 margin-bottom。如果两者都显示非零（比如都是 16px），但元素本身没写任何 margin，且内部为空（连空格都没有），那基本就是自我合并在起作用。
典型场景包括：
- CMS 输出的
<p></p>或<div class="card"></div> - JS 动态插入后尚未填充内容的容器
- 用作占位或加载提示但忘了加最小高度的空盒子
给空 div 加 min-height: 1px 最直接有效
这是兼容性最好、副作用最小的破局方式。它不依赖 BFC，也不改变文档流，纯粹靠“让盒子有物理存在感”来打破 collapse 条件。
height: 0 不行——仍满足“空块”定义；line-height: 1px 也不行——没内容就不会生成行框，无效。
推荐写法：
.placeholder {
min-height: 1px;
}
如果该空 div 是用于视觉占位（比如骨架屏），用 min-height: 24px 比硬写 height 更安全，避免后续内容撑高时被截断。
用 border 或 padding 打断合并条件
CSS 规范明确：只要 margin 之间存在非零的 border、padding 或内容，合并就失效。
常用组合：
-
border-top: 1px solid transparent—— 语义稍弱，但兼容老浏览器 -
padding-top: 1px—— 更直观，但会略微增加盒模型总高度 -
padding: 0.1px—— 极小值也够用，几乎不可见
注意：padding: 0 或 border: none 不算“存在”，必须是计算后宽度 > 0 的值。
为什么不用 overflow: hidden 或 display: flow-root？
它们确实能触发 BFC、阻止合并，但属于“大招”——会带来额外影响：
-
overflow: hidden可能意外裁剪子元素的阴影、下拉菜单或滚动溢出内容 -
display: flow-root虽然现代且干净（Chrome 58+/Firefox 53+ 支持），但在 IE 或旧版 Safari 中不生效，需降级处理
对纯空 div 来说，加 min-height 或 padding 更轻量、更可控。BFC 方案更适合需要包裹浮动子项或隔离复杂父子 margin 的场景。
真正容易被忽略的是：空格、换行符、注释这些看似“空”的内容，其实会让元素不再满足 collapse 条件；但依赖它们不可靠——HTML 压缩、模板引擎自动 trim 都可能把它们吃掉。所以别赌空格，老老实实加 min-height: 1px 或 padding-top: 1px。
