div内的图像在图像下面有额外的空间
为什么在下面的代码中， div的高度大于img的高度？ 图像下方有空隙，但它似乎不是填充/边距。
图像下方有什么空白或额外空间？
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>默认情况下，图像以内联方式呈现，如字母。
它与a，b，c和d坐在同一条线上。
该行下面有空间，用于在f，j，p和q等字母上找到的下行字。
您可以调整图像的vertical-align位置以将其放置在其他位置（例如middle ）或更改display ，使其不在内联。
此处建议的另一个选项是将图像style="display: block;"设置为style="display: block;"
快速解决：
要删除图像下方的空隙 ，您可以：
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>