为什么在下面的代码中div的高度大于img的高度？ 图像下面有一个空隙，但似乎不是填充/边距。
图像下面的空隙或额外空间是多少？
null
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>null
默认情况下，图像是内联呈现的，就像一个字母，所以它位于a，b，c和d所在的同一行。
在这一行下面有空格，可以用来表示g，j，p和q等字母上的降阶符。
您可以:
垂直对齐以将其定位在其他位置（例如中间)或显示，使其不内联。null
div {
border: solid black 1px;
margin-bottom: 10px;
}
#align-middle img {
vertical-align: middle;
}
#align-base img {
vertical-align: bottom;
}
#display img {
display: block;
}<div id="default">
<h1>Default</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
<div id="align-middle">
<h1>vertical-align: middle</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="align-base">
<h1>vertical-align: bottom</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display">
<h1>display: block</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
这里建议的另一个选项是将图像的样式设置为style=“display:block；”
要去除图像下的间隙，可以:
vertical-align:Bottom；vertical-align:Top；或vertical-align:Middle；display:block；请参阅下面的代码以获得现场演示:
null
#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>