幽灵空白节点能撑开父盒子高度是因为它作为行内级、零宽度、继承父级 font-size 和 line-height 的不可见盒子参与行框构建，而父容器高度由行框总高度决定；vertical-align 通过改变对齐基准点间接影响行框底部位置；最可靠方案是 font-size: 0 + vertical-align: bottom + flex 布局组合。
幽灵空白节点为什么能撑开父盒子高度
因为幽灵空白节点本质是一个「行内级、零宽度、但继承父级 font-size 和 line-height」的不可见盒子，它参与行框（line box）构建，而父容器（如 div）的高度默认由其内部所有行框的总高度决定。
哪怕你只写了一个 img，只要它是 display: inline-block 或默认 inline，浏览器就会为它生成一个行框；这个行框里除了图片本身，还包含一个“基线对齐用”的幽灵空白节点——它的存在让整个行框被拉高到至少 line-height 的值，从而撑开父 div。
常见现象：div 背景色显示出了意外高度，检查发现里面只有一个 img，且没设 height 或 margin —— 那就是幽灵节点在起作用。
设置 line-height: 0 为什么有时无效
设 line-height: 0 确实能消除幽灵节点带来的额外行高，但它只对「纯内联内容」有效；一旦父容器里有真实文字或设置了 font-size 的子元素，line-height: 0 可能导致文字被压缩甚至不可读，而且某些浏览器（如旧版 Safari）对 line-height: 0 渲染不一致。
-
line-height: 0对img本身无影响，但会强制整行行框高度为 0，前提是该行没有其他需要渲染文本的内联元素 - 如果父容器里同时有文字和
img，设line-height: 0后文字可能消失或重叠——这不是 bug，是规范行为 - Flex/Grid 容器中设
line-height: 0通常无意义，因为它们不依赖行框计算高度
vertical-align 怎么影响幽灵节点的视觉高度
vertical-align 不改变幽灵节点是否存在，而是改变它与 img 等替换元素的对齐方式，从而间接影响行框底部位置。默认 vertical-align: baseline 会让图片底部对齐文字基线，而基线下方还留有下降部（descender）空间——这部分也被算进行框高度。
所以把 img 设为 vertical-align: bottom，等于让它的底边直接贴住行框底边，消除了 descender 留白；设为 middle 或 top 同理，只是对齐参考点不同。
-
vertical-align: baseline→ 图片底边对齐文字基线，幽灵节点+descender 共同撑高 -
vertical-align: bottom→ 图片底边对齐行框底边，幽灵节点仍在，但不再“拖后腿” - 该属性只对
inline/inline-block元素生效，block元素无视它
真正可靠的组合方案
单靠一个属性很难 100% 消除所有场景下的幽灵节点干扰。最稳的落地方式是组合控制：父容器断源 + 子元素对齐 + 布局升级。
- 父容器设
font-size: 0，从源头抹掉幽灵节点的“字号基础”，再单独给文字子元素设回font-size -
img或span等行内块元素统一加vertical-align: bottom - 新项目优先用
display: flex替代inline-block布局——Flex 容器天然不生成行框，幽灵节点根本没机会出现 - 若必须兼容老浏览器且含文字，避免
line-height: 0，改用line-height: 1+font-size: 0组合更安全
幽灵空白节点不是 bug，是 CSS 行内格式化上下文的自然产物；理解它在哪起效、怎么被对齐逻辑牵动，比死记“设哪个值”更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
