基本现象

现在我们有一个<div>标签，然后，里面有一张<img>图片，就像这样

<div>
   <img src="/img/xxx.jpg" />x
</div>

然后，我们可以清晰地发现，图片下方有一段空白空间，大家应该都遇到过类似的问题，
实际上，这段空白间隙就是vertical-align和line-height一起导致的。
首先，大家一定要意识到这么一点：对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！

原因是什么？
这里我们引入一个“幽灵空白节点”的一个名词，幽灵空白节点在h5文档声明下，块状元素内部的内联元素行为表现，就好像块状元素内部还有一个看不见摸不着没有宽度没有实体的空白节点。
这里我们对文字背景进行一个显示，我们让新增的文本inline-block化，然后弄个白色背景，显示其占据的高度。

会发现，图片下面的间隙，依旧是那个间隙。但是，我们的理解就好理解了。回答下面几个问题，我们就知道表现的原因了：

1、vertical-align 默认对齐的方式是？

2、后面的xxx文字的高度从何而来？

上面的问题解答：

1、vertical-align默认值是baseline,也就是基线对齐。而基线是什么，基线就是字母x的下边缘，所以图片的下边缘就和后面的xxx中的字母x下边缘对齐。而字符xxx本身是有高度的，所以图片下面就留空了。

2、而xxx文字高度是由行高决定的。
因此，简单的图片下面留白行为表现，本质上，就是vertical-align和line-height造成的。

知道了问题的原因，我们就可以对症下药，准确搞定图片下面我们不希望看到的间隙。怎么搞呢？vertical-align和line-height我们随便搞定一个就可以了。

比方说vertical-align

1、让vertical-align失效

图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等（如果布局允许）。例如：

img { display: block; }

2、使用其他vertical-align值

告别baseline, 取用其他属性值，比方说bottom/middle/top都是可以的。

3、直接修改line-height值

下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。比方说，我们设置行高5像素：

div { line-height: 5px; }