div内的图像在图像下面有额外的空间
为什么在下面的代码 div的高度大于img的高度？ 图片下方有一段空白，但似乎不是填充/边距。
图像下方有多大的间隙？
#wrapper { border: 1px solid red; width:200px; } img { width:200px; }
<div id="wrapper"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div>
默认情况下，图像以内联方式呈现，如字母。
它与a，b，c和d坐在同一条线上。
这个行下面有空格，你可以在字母f，j，p和q上find下行字符。
您可以调整图像的vertical-align位置以将其放置在其他位置（例如middle ）或更改display ，使其不在内联。
此处build议的另一个选项是将图像style="display: block;"设置为style="display: block;"
快速解决：
为了消除图像下方的空隙 ，您可以：
- 将图像的vertical-align属性设置为
vertical-align: bottom;vertical-align: top;或vertical-align: middle; - 设置要显示的图像的显示属性
display:block;
请参阅以下代码以获取实况演示：
#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>
也可以使父母的行高无效：
#wrapper { line-height: 0; }
所有修正： http : //jsfiddle.net/FaPFv/
你所要做的就是分配这个属性：
img { display: block; }
图像默认具有这个属性：
img { display: inline; }
我发现它使用显示：块; 在图像上和vertical-align：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>
你可以使用几个方法来解决这个问题
-
使用
line-height#wrapper { line-height: 0px; } -
使用
display: flex#wrapper { display: flex; } #wrapper { display: inline-flex; } -
使用
display:block，table，flex和inherit#wrapper img { display: block; } #wrapper img { display: table; } #wrapper img { display: flex; } #wrapper img { display: inherit; }
我只是添加浮法：左分区，它的工作
我用line-height：0，对我来说工作正常。
