<p>幽灵空白节点是浏览器在行内格式化上下文中对空白字符的标准解析行为，表现为不可见文本节点，参与行高计算和基线对齐，导致父容器高度异常；其高度源于 line-height - font-size 的剩余空间，受父级 font-size 和 line-height 共同影响。</p>
幽灵空白节点为什么会让父容器高度异常？
幽灵空白节点不是 bug，是浏览器在行内格式化上下文（IFC）中对换行符、空格等空白字符的标准解析行为。它表现为一个不可见、不可选、无法用 document.querySelector 获取的文本节点，但会参与行高计算和基线对齐——尤其当子元素是 inline-block 或 img（默认 display: inline）时，父容器高度会被它悄悄撑开。
常见现象包括：div 高度比预期多出 3–5px、滚动条意外出现、background-color 显示不全、与相邻元素对不齐。
- 它只在 IFC 中生效，
display: flex/display: grid容器里根本不会产生 - 它的“高度”本质是
line-height - font-size的剩余空间，受父级font-size和line-height共同影响 - 开发者工具里看不到它，但用
getComputedStyle(el).height能测出父容器实际高度 > 子元素高度
用 font-size: 0 治标，但必须重置子元素字号
这是最常用也最容易翻车的解法：设父容器 font-size: 0，让幽灵节点“没字可排”，从而失去高度；但所有继承该样式的子元素文字也会变小——你得手动恢复。
典型错误写法：.parent { font-size: 0; } .child { /* 忘了设 font-size */ } → 子元素文字消失。
立即学习“前端免费学习笔记（深入）”；
- 必须显式给子元素设置
font-size，例如.child { font-size: 14px; } - 如果子元素含
em或rem单位，注意它们会基于父级font-size: 0计算为 0 —— 改用px或vw - 慎用于需要无障碍阅读的区域（如按钮文字），某些读屏器可能因字号归零误判内容缺失
display: flex 是根治方案，但别漏掉关键声明
display: flex 跳过 IFC，源码中的空白字符直接被忽略，幽灵节点从源头消失。但它不是“设了就完事”，现代布局下仍需三处收敛：
- 必须加
flex-wrap: nowrap：防止子项过多时自动换行，引入新的行框和潜在间隙 - 显式设
gap: 0：Safari ≤14.0 对gap支持不全，不设可能 fallback 到旧有 margin 行为 - 不要动
align-items：保持默认stretch，否则子元素高度不一致会让人误以为“还有空白” - 子元素原有
display: inline-block或margin必须清理——flex 不会帮你覆盖旧样式
排查时优先看 computed height 和 line-height 关系
遇到高度异常，别急着改样式，先打开开发者工具的 Computed 面板查两件事：
- 父容器
height值是否大于子元素offsetHeight？差值就是幽灵节点贡献的高度 - 父容器
line-height是否为数值（如20px）或相对值（如1.5）？若为相对值，再看其font-size—— 二者共同决定行框高度 - 临时加
outline: 1px solid red到父容器，确认是“撑高了”而非“边框没显示” - 检查子元素是否意外继承了
vertical-align: baseline（尤其img），改vertical-align: bottom可快速验证
真正容易被忽略的是：幽灵空白只存在于 IFC，一旦用了 display: flex 或 display: grid，vertical-align 和 line-height 对子元素就完全失效——这时候还去调这两个属性，方向就错了。
