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> 

---

#1楼

也可以使父母的行高无效：

#wrapper {
  line-height: 0;
}

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

---

#2楼

我刚刚在div中添加了float:left ，它起作用了

---

#3楼

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

---

#4楼

我发现使用display：block效果很好。 在图像上和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> 

或者您可以将代码编辑为JS FIDDLE

---

#5楼

快速解决：

要消除图像下方的间隙 ，您可以：

• 设置图像的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> 

---

说明：为什么图像下方有缝隙？

图像下方的间隙或多余空间不是错误或问题，它是默认行为。 根本原因是图像被替换为元素（ 请参见MDN和W3C ）。 这使他们可以“像图像一样行动”，并具有自己的固有尺寸，长宽比。
浏览器计算它们的显示属性inline但是它们给它们一种特殊的行为，使它们更接近inline-block元素（因为您可以垂直对齐它们，给它们提供高度，顶部/底部边距和填充，转换...）。

这也意味着：

[...]当图像在具有vertical-align：基线的嵌入式格式化上下文中使用时，图像的底部将摆放在容器的基线上 。 （ 来源： MDN ，重点是我的 ）

由于浏览器默认将vertical-align属性计算为基线，因此这是默认行为。 下图显示了基线在文本上的位置：

如上图所示，基线对齐元素需要留出延伸到基线以下的下降空间（如j, p, g ... ）。 在此配置中， 图像的底部在基线上对齐，如本例所示：

 div{border:1px solid red;} img{width:100px;height:auto;} 

 <div> <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender </div> 

---

这就是为什么<img>标记的默认行为会在其容器的底部创建间隙的原因，以及为什么更改vertical-align属性或display属性将其删除的原因，如以下演示所示：

 div {width: 100px;border: 1px solid red;} img {width: 100px;height: auto;} .block img{ display:block; } .bottom img{ vertical-align:bottom; } 

 <p>Default:</p> <div> <img src="http://i.imgur.com/RECDV24.jpg" /> </div> <p>With display:block;</p> <div class="block"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div> <p>With vertical-align:bottom;</p> <div class="bottom"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div> 

---

#6楼

您所要做的就是分配此属性：

img {
    display: block;
}

图像默认具有此属性：

img {
    display: inline;
}

---

#7楼

您可以使用多种方法来解决此问题，例如

1. 使用line-height

    #wrapper { line-height: 0px; } 

2. 使用display: flex

    #wrapper { display: flex; } #wrapper { display: inline-flex; } 

3. 使用display: block ， table ， flex和inherit

    #wrapper img { display: block; } #wrapper img { display: table; } #wrapper img { display: flex; } #wrapper img { display: inherit; } 

---

#8楼

默认情况下，图像以字母形式内联呈现。

它与a，b，c和d位于同一行。

在该行下面有空间，您可以找到f，j，p和q之类的字母的后代。

您可以调整图像的vertical-align方式以将其放置在其他位置（例如， middle ），也可以更改display以使其不嵌入式。

---

#9楼

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