为什么在下面的代码div的高度大于img的高度?图像下方有一个空白，但它似乎不是填充/边距。
图像下方的空隙或额外空间是什么?
#包装{ 边框:1px纯红色; 宽度:200 px; ｝ img { 宽度:200 px; ｝ < div id = "包装" > <img src="http://i.imgur.com/RECDV24.jpg" /> < / div >
当前回答
默认情况下，图像是内联呈现的，就像字母一样，因此它与a、b、c和d位于同一行。
在这条线下面有空间是g、j、p和q等字母的降序。
您可以:
调整图像的垂直对齐，以将其定位在其他位置(例如中间)或 更改显示，使其不是内联的。
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>
所包含的图片是公共领域的，来自维基共享资源
其他回答
我使用line-height:0，这对我来说很好。
我只是添加了float:left到div，它起作用了
你也可以取消父行高:
#wrapper {
line-height: 0;
}
所有修复:http://jsfiddle.net/FaPFv/
你也可以设置overflow: hidden;对于容器，将图像的高度增加到> 100%。高度:100%;
本文中建议的另一个选项是将图像的样式设置为style="display: block;"
