图片下方为何有空隙？

举个简单例子

结果：

上图红色的那根线就是文字的基线，字母 x 的底部刚好在基线上（基线：小写字母 x 的底部）。line boxes中的vertical-align默认基线对齐，而图片作为其中的一个inline boxes元素，同样也是基线对齐，所以会出现上图的结果。

如何取消空隙呢？
设置vertical-align: top;

设置vertical-align: middle;

设置vertical-align: bottom;

还可以把图片设置为块级元素
img {
   display:block;
}