举个简单例子
结果：
上图红色的那根线就是文字的基线，字母 x 的底部刚好在基线上（基线：小写字母 x 的底部）。line boxes中的vertical-align默认基线对齐，而图片作为其中的一个inline boxes元素，同样也是基线对齐，所以会出现上图的结果。
如何取消空隙呢？
设置vertical-align: top;
设置vertical-align: middle;
设置vertical-align: bottom;
还可以把图片设置为块级元素
img {
display:block;
}