为什么在以下代码中div的高度大于img的高度？图像下方有一个间隙，但似乎不是填充/边距
图像下方的间隙或额外空间是多少？
#{
边框：1px纯红；
宽度：200px；
}
img{
宽度：200px；
}<；div id=“包装器”>；
<；img src=”http://i.imgur.com/RECDV24.jpg“/>；
</部门>默认情况下，图像以内联方式呈现，就像字母一样，因此它位于a、b、c和d所在的同一行上
在这条线的下面有一个空格，你可以在字母g，j，p和q上找到下一个字母
你可以：
- 调整图像的
垂直对齐，将其放置在其他位置（例如中间）或 - 更改
显示，使其不内联
div{
边框：纯黑1px；
边缘底部：10px；
}
#对齐中间img{
垂直对齐：中间对齐；
}
#对齐基础img{
垂直对齐：底部对齐；
}
#显示img{
显示：块；
}<；div id=“默认值”>；
<；h1>；违约</h1>；
敏捷的棕色狐狸跳过了懒狗<；img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg“alt=”“>；
</部门>；
<；div id=“中间对齐”>；
<；h1>；垂直对齐：中间</h1>；
敏捷的棕色狐狸跳过了懒狗<；img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg“alt=”“></部门>；
<；div id=“对齐底座”>；
<；h1>；垂直对齐：底部</h1>；
敏捷的棕色狐狸跳过了懒狗<；img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg“alt=”“></部门>；
<；div id=“display”>；
<；h1>；显示：块</h1>；
敏捷的棕色狐狸跳过了懒狗<；img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg“alt=”“>；
</部门>包含的图像是公共域，来源于Wikimedia Commons