div内的图像在图像下方有额外的空间答案

【问题标题】：Image inside div has extra space below the imagediv内的图像在图像下方有额外的空间
【发布时间】：2011-08-13 20:08:33
【问题描述】：

为什么在following code 中div 的高度大于img 的高度？图像下方有一个间隙，但它似乎不是填充/边距。

图片下方的间隙或多余空间是什么？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

【问题讨论】：

这里有一个关于这个问题的好读物：The Strange <img> Gap In HTML

标签： html css image

【解决方案1】：

默认情况下，图像是内联渲染的，就像字母一样，因此它与 a、b、c 和 d 位于同一行。

在 g、j、p 和 q 等字母上找到的 descenders 在该行下方有空格。

你可以：

调整图像的vertical-align 以将其定位到其他位置（例如middle）或
更改 display 使其不是内联的。

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>

包含的图片是公共领域的，sourced 来自维基共享资源

【讨论】：

更准确地说，这发生在 b/c 内联元素占用了它们当前 line-height 的空间。将line-height 设置为所需的尺寸也将克服不需要的空白。
“f”是否有资格作为后代？
@j08691 — 取决于字体。
请注意，如果您使用vertical-align: bottom 或middle，如果您的图像很小（小于行高），您可能会开始看到神秘空间出现在上方图像。 stackoverflow.com/questions/17905827/…。简化测试用例：jsbin.com/jotacipaqu/1/edit?html,css,output

【解决方案2】：

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

【讨论】：

谢谢。这也解决了 Flash 电影下空间的类似问题。（添加 display:block 以嵌入/对象标签）
或 inline-block 如果您仍然希望它像通常的图像一样显示内联。
@Ian @Imperative inline-block 似乎不起作用。
然而，这打破了text-align:center。

【解决方案3】：

也可以取消父母的行高：

#wrapper {
  line-height: 0;
}

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

【讨论】：

警告！这也将杀死#wrapper 中的所有文本节点。因为它将被继承。但是那个很棒的提琴手的奖励积分！在这里它用文本节点更新。 jsfiddle.net/FaPFv/30
或者，字体大小：0
@mfluehr 请不要将 JSFIddle 中的实质性内容复制到 Stack Overflow 以获取其他人的代码。 JSFiddle 不发布许可证，您也无权将其他人的代码发布到 Stack Overflow，后者根据 CC By-SA 4.0 许可其内容。

【解决方案4】：

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

【讨论】：

这是因为设置float:left会导致display:block

【解决方案5】：

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

【讨论】：

对不起，-1：这搞砸了文本定位，所以如果有人还在图像旁边放了一些（尤其是多行，比如<BR>）文本，他们就会定位错误，重叠/悬垂的混乱。

【解决方案6】：

我发现使用 display:block; 效果很好。在图像上和垂直对齐：顶部；在文字上。

.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

【讨论】：

【解决方案7】：

快速修复：

要去除图片下方的空隙，您可以：

将图像的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 replaced elements）。这使他们能够“像图像一样行事”并拥有自己的内在尺寸、纵横比....
浏览器将它们的显示属性计算为inline，但它们赋予它们一种特殊的行为，使它们更接近inline-block 元素（因为你可以垂直对齐它们，给它们一个高度，顶部/底部边距和填充，变换......） .

这也意味着：

<img> 没有基线，所以当图像用于内联格式时垂直对齐的上下文：基线，图像的底部将是放置在文本基线上。
（来源：MDN，重点是我的）

由于浏览器默认计算垂直对齐属性到基线，这是默认行为。下图显示了基线在文本上的位置：

(Image source)

基线对齐的元素需要为延伸到基线下方的descenders（如j, p, g ...）保留空间，如上图所示。在此配置中，图像的底部与基线对齐，如您在此示例中所见：

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}

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

这就是为什么<img> 标签的默认行为会在其容器底部创建一个间隙，以及为什么更改垂直对齐属性或显示属性会删除它，如下面的演示所示：

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>

【讨论】：

这就是为什么将 font-size 设置为 0 不起作用的原因。是吗？
@Persijn 确实如此。就像设置 line-height:0; 一样，但与更改垂直对齐或显示属性相比，我认为这不是一个好的解决方法
但是请注意，有些浏览器不尊重font-size:0：他们在用户设置中将字体大小设置为最小大小。
是的，它似乎是一个空白区域。
好吧，我觉得图中的middletext-topsubsuper位置不对。

【解决方案8】：

你所要做的就是分配这个属性：

img {
    display: block;
}

图片默认有这个属性：

img {
    display: inline;
}

【讨论】：

【解决方案9】：

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

使用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 hack，或者至少说明一下，为什么它是所有这些中最糟糕的“解决方案”：有人将文本放在图像旁边的那一刻（尤其是带有 BR 标签的预格式化多行），他们会发现自己的处境比开始时更糟。
这在所有解决方案中对我帮助最大。但是，我的包装 div 现在扩展到主题图像之外，以前在 div 中显示内联块修复了该问题。 TY

【解决方案10】：

您也可以为容器设置overflow: hidden;，并将图像高度增加到> 100%。 height: 100%;

【讨论】：