1. 什么是幽灵空白

在HTML5 文档声明中，内联元素（行内块）的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，这就是“幽灵节点”

2. 创建幽灵节点

正常情况下，d1、d2不设置height，d1、d2的盒子高度都为0。此时将d2设置为行内块之后效果如下图

可以看到d1的height变为了21.16，将子元素d1设置成inline-block后，导致子元素d1同级其实多出来了一个所谓的“空白节点”，而父元素的高度是由这个“空白节点”撑开的

产生幽灵空白的主要原因与基线有关，在所有内联相关模型中，凡是涉及到垂直方向的排版或者对齐的，都离不开最最基本的基线（base-line），行内块于文本基线对齐，而文本的基线与文本最底端之间有一段距离

在字体设计中通常都会第一个确定X的位置，可以简单的理解为紧贴着X字母最底边的位置就是基线的位置

3. 解决幽灵节点

1. 对子元素使用vertical-align

可以看到已经对img使用vertical-align，但是幽灵节点还存在？这是因为vertical-align的默认值就是baseline对齐，将值设为top、bottom、middle幽灵节点就会消失了，文字也会对应处于top、bottom、middle的位置

2. 将子元素转为块元素

这种方式不适用于前后有文字的情况

3. 对父元素设置font-size: 0

这种方式需要额外设置行内块的其他文本的字体大小