可以看一下这里
html - html5 vertical spacing issue with <img>
几乎是题主问题的一种更详细问答。
原因：我大概看了一下，挺有意思的。我简单翻译一下高票答案：
首先，浏览器并没有所谓的"HTML 5 模式"，而是只有三种：怪异模式(Quirks)，几乎标准的模式(Limited Quirks)和标准模式(Standards)，其中几乎标准的模式和标准模式之间的唯一差异在于是否对<img>元素给定行高(line-height)和基线(baseline)。几乎 标准模式中，如果<img>标签所在行没有其他的行内元素，将不指定基线(baseline)，<img>标签因此会紧贴着父元素底部。 在标准模式中， 行框总是会包含类似字母"g"，"f"尾巴下伸出来的那一部分空间(针对下行字母)，即使行框内并没有任何内容。因此这种情况下你看到的<img>跟父元素底部几个像素的间隙实际上就是为”字母尾巴“预留的。 使用 XHTML Transitional Doctype会是浏览器运行在”几乎标准模式(Limited Quirks)”。如果你使用XHTML Strict 或者HTML 4 Strict模式，你将看到和使用HTML 5 模式同样的间隙，因为这是标准模式(Standards mode)。
解决方法：当然解决方式很简单，针对多出来的字母尾巴，设置行高或者字体大小为0（给div），或者设置对齐基线垂直居中(vertical-align:middle;)，至于display:block,一般我是不太推荐的，因为变成块元素又得占一行了……
链接：https://www.zhihu.com/question/38437397/answer/76617831