div中的图像在图像下面有额外的空间

为什么在下面的代码div的高度大于img的高度?图像下方有一个空白，但它似乎不是填充/边距。

图像下方的空隙或额外空间是什么?

#包装{ 边框:1px纯红色; 宽度:200 px; ｝ img { 宽度:200 px; ｝ < div id = "包装" > <img src="http://i.imgur.com/RECDV24.jpg" /> < / div >

当前回答

你也可以取消父行高:

#wrapper {
  line-height: 0;
}

所有修复:http://jsfiddle.net/FaPFv/

其他回答

我只是添加了float:left到div，它起作用了

你也可以取消父行高:

#wrapper {
  line-height: 0;
}

所有修复:http://jsfiddle.net/FaPFv/

本文中建议的另一个选项是将图像的样式设置为style="display: block;"

你可以使用几种方法来解决这个问题

使用行高 #包装{line-height: 0px;｝使用显示:flex #包装{显示:flex;｝ #包装器{显示:inline-flex;｝使用显示:块，表，伸缩和继承 #包装img{显示:块;｝ #包装img{显示:表;｝ #包装img{显示:flex;｝ #包装img{显示:继承;｝

我使用line-height:0，这对我来说很好。

推荐文章