什么是幽灵空白节点？

幽灵空白节点的形成

"Each line box starts with a zero-width inline boxwith the element's font and line height properties. We call that imaginary box a 'strut'."
每个行框盒子都以一个具有元素的字体和行高属性的零宽度行内框开始。我们称这个假想的盒子为"支柱" 从规范中可以幽灵空白节点的形成主要和行内框（line box）的形成有关。

行内框（line box）的形成

当内联级盒子包含了内联内容的时候，就会形成行内框，随之空白幽灵节点也生成了。
内联级盒子：display 值为inline的非替换元素。
内联内容：内联级盒子或者文本内容。

<div class="main">
  xxx
  <span id="z"><span></span></span>
</div>
<style>
#z{
  display:inline-block;
  width:20px;
  background:yellow;
  height:100px;
}
</style>

此时 z 元素里的span元素并不是内联内容而是内联级盒子，所以z元素里并不会形成行内框。
接下来在 z 元素里加入内联内容之后：

<div class="main">
  xxx
  <span id="z">xxx</span>
</div>
<style>
#z{
  display:inline-block;
  width:20px;
  background:yellow;
  height:100px;
}

可以看到基线已经发生改变，行内框已经产生了，内联级盒子为匿名内联盒子也叫根内联盒子。（内联内容必然放在内联级盒子中，要么是匿名内联盒子，要么为显性内联盒子例如span）。接下采用空白内联内容来直观感知幽灵空白节点：

<div class="main">
  xxx
  <span id="z"><span></xpan></span>
</div>
<style>
#z{
  display:inline-block;
  width:20px;
  background:yellow;
  height:100px;
}
#z span{
display:inline-block;
}

当 span的display变为 inline-block后，它不再是内联盒子反而变为了内联内容，产生行内框，进而产生幽灵空白节点。
内联级的内容除了文本、display为inline-block的元素外还有img,input等替换元素。大家可以自己试一下，都会产行内框。

总结：幽灵空白节点的出现，主要取决于块级容器里是否包含内联级内容。

一文带你搞懂“幽灵空白节点”的形成

什么是幽灵空白节点？

幽灵空白节点的形成

行内框（line box）的形成