为什么在下面的代码div的高度大于img的高度?图像下方有一个空白，但它似乎不是填充/边距。
图像下方的空隙或额外空间是什么?
#包装{ 边框:1px纯红色; 宽度:200 px; ｝ img { 宽度:200 px; ｝ < div id = "包装" > <img src="http://i.imgur.com/RECDV24.jpg" /> < / div >
当前回答
我只是添加了float:left到div，它起作用了
其他回答
我发现它使用display:block很棒;在图像上并垂直对齐:top;在文本上。
.imagebox { width:200px; float:left; height:88px; position:relative; background-color: #999; } .container { width:600px; height:176px; background-color: #666; position:relative; overflow:hidden; } .text { color: #000; font-size: 11px; font-family: robotomeduim, sans-serif; vertical-align:top; } .imagebox img{ display:block;} <div class="container"> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> <div class="imagebox"> <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span> </div> </div>
或者你可以编辑代码JS提琴
我使用line-height:0，这对我来说很好。
你也可以设置overflow: hidden;对于容器，将图像的高度增加到> 100%。高度:100%;
你所要做的就是分配这个属性:
img {
display: block;
}
图片默认有这个属性:
img {
display: inline;
}
我只是添加了float:left到div，它起作用了
