快速解决：
要消除图像下方的间隙，您可以：
- 将图像的垂直对齐属性设置为
vertical-align: bottom; vertical-align: top;或vertical-align: middle;
- 将图像的显示属性设置为
display:block;
请参见以下代码进行实时演示：
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
说明：为什么图像下方有缝隙？
图像下方的间隙或多余空间不是错误或问题，它是默认行为。根本原因是图像被替换为元素（请参见MDN替换的元素）。这使它们可以“像图像一样工作”，并具有自己的固有尺寸，宽高比...。
浏览器计算其显示属性inline但是它们赋予它们特殊的行为，使它们更接近inline-block元素（因为您可以垂直对齐它们，所以它们的高度，顶部/底部边距和填充，转换...）。
这也意味着：
<img>没有基线，因此当在带有vertical-align：基线的嵌入式格式化上下文中使用图像时，图像的底部将放置在文本基线上。
（来源：MDN，重点是我的）
由于浏览器默认将vertical-align属性计算为基线，因此这是默认行为。下图显示了基线在文本上的位置：
（图片来源）
如上图所示，基线对齐的元素需要留出延伸到基线以下的下降空间（如j, p, g ...）。在此配置中，图像的底部在基线上对齐，如本例所示：
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
这就是为什么<img>标记的默认行为会在其容器的底部创建一个间隙，并且为什么更改“ vertical-align”属性或“ display”属性会删除它，如以下演示所示：
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
