问题：
<div><img src="mm1.jpg"></div>
然后，表现就是一张图片呈现，类似下面这样：
恩，看上去很正常，一切都是理所当然。然而，如果我们给这个<div>元素增加一个背景色，例如淡蓝色：
<div style=""><img src="mm1.jpg"></div>
则会是下面这样：
会发现图片下面有一段空白空间：
想必大家都遇到过类似问题，不知大家有没有思考过，为什么图片下面有留有一段间隙呢？
实际上，这段空白间隙就是vertical-align和line-height携手搞的鬼！
首先，大家一定要意识到这么一点：对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！
原因：
vertical-align默认的对齐方式是？- 后面zxx文字的高度从何而来？
上面2个问题就很简单了：
vertical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘。所以，妹子图片的下边缘就和后面zxx中的字母x下边缘对齐（见下图）。而字符zxx本身是有高度的，对吧，于是，图片下面就留空了。
- 而
zxx文字的高度是由行高决定的。
因此，简单的图片下面留白行为表现，本质上，就是vertical-align和line-height背地里造成的。
基本解决办法：
1. 让vertical-align失效
图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等（如果布局允许）。例如：
img { display: block; }
则妹子就会变这样：
下面的空隙不见了。
2. 使用其他vertical-align值
告别baseline, 取用其他属性值，比方说bottom/middle/top都是可以的。
zxx3. 直接修改line-height值
下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。比方说，我们设置行高5像素：
div { line-height: 5px; }
zxx4. line-height为相对单位，font-size间接控制
如果line-height是相对单位，例如line-height:1.6或者line-height:160%之类，也可以使用font-size间接控制，比方说来个狠的，font-size设为大鸡蛋0, 本质上还是改变line-height值.
div { font-size: 0; }
zxx