什么是幽灵空白节点？

内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个"空白节点"一样。这个"空白节点"永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，将其称之为"幽灵空白节点"，也就是官方规范中的 "strut"。

基线

在 CSS 中有两个重要属性，line-height 和 vertical-align 都与基线有关：

  • line-height 行高的定义就是两个基线之间的距离。
  • vertical-align 的默认值是 baseline，也就是基线对齐。

对于内联元素，我们要认识到，虽然 vertical-align 与 line-height 看不见，但实际上到处都是！

在 line box 模型中，inline boxes 的高度直接受 line-height 控制，而真正的高度表现则是由每行众多的 inline boxes（等于内部最高的 inline box 的高度），而这些 line boxes 的高度垂直堆叠形成了 containing box 的高度，也就是我们见到的 <p> 或者 <div> 标签的高度。

对于内联元素，vertical-align 的默认值是 baseline，也就是基线对齐，所以我们看到 <div> 标签中图片和 span 中的元素都是以字母 x 的下边缘对齐的。

字符 x 的自身是有高度的（由 font-size 属性决定）。

视图中 line box 的高度由 line-height 属性决定。根据上面的分析，由于 vertical-align 的默认对齐属性和 line-height 导致图片需要和其他元素对齐时会导致出现图片下面的空隙。

如果一行有多个行内元素，则以行内框最大的那个为基准，其他的行内框向基准对齐。

消除"幽灵空白节点"的影响

img {
    vertical-align: bottom; /* 或 top / middle 都能消除基线下方空白 */
}

补充：

  • 给图片设置 display: block 也能彻底消除幽灵空白节点，因为它不再是 inline 元素，不参与基线对齐。
  • 父元素设置 font-size: 0 也可以让行高为 0，从而塌陷掉 strut，但要求所有子元素显式设置 font-size。
  • 现代工程中推荐优先 display: block 或 vertical-align 调整，避免污染子元素。