幽灵空白节点

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

原因：vertical-align默认对齐方式和line-height文字的高度造成的
解决方法：

• 让vertical-align失效
  图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等
• 使用其他vertical-align值
  vertical-align:top
  vertical-align:middle
  vertical-align:bottom
• 直接修改line-height值
  下面的空隙高度，实际上是文字计算后的行高值和文字下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。
• line-height为相对单位，font-size间接控制
  如果line-height是相对单位，例如line-height:1.6或者line-height:160%之类，也可以使用font-size间接控制，比如font-size设为0, 本质上还是改变line-height值