在 div 内的图片下方有额外的空白空间

Question

为什么在以下代码中，div的高度比img的高度大？图像下方有一段空白区域，但似乎不是填充/边距造成的。 图像下方的间隙或额外空间是什么？

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

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

- Misha Moroshko

---

这是一篇关于这个问题的好文章：HTML 中奇怪的 <img> 间隙。 - Matheus Avellar

Answer 1

默认情况下，图像会作为一个内联元素呈现，就像字母一样，因此它会和a、b、c和d位于同一行上。该行以下有空间留给字母g、j、p和q等带有降部的字符。

您可以： - 调整图像的vertical-align属性来将其定位在其他位置（例如middle），或者 - 更改display属性，使其不再是inline。

参考链接：descenders vertical-align

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>

---

这张图片是公共领域的，并且来源于维基共享资源。

- Quentin

---

更准确地说，这是因为内联元素占据了其当前 line-height 的空间。将 line-height 设置为期望的尺寸也能解决不必要的空白问题。 - Kevin Boucher

“f”是否算作下行字母？ - j08691

这取决于字体。 - Quentin

请注意，如果您使用了vertical-align: bottom或middle属性，并且您的图片很小（小于行高），则可能会在图片上方出现神秘空白。这是一个减少了的测试案例：https://jsbin.com/jotacipaqu/1/edit?html，css，output - Oliver Joseph Ash

哇，我一直在苦思冥想这个问题。设置 vertical-align: bottom; 解决了问题。 - Indika K

Answer 2

这篇博客文章中提到的另一种选择是将图片的样式设置为style="display: block;"

- Thea

---

谢谢。这也修复了一个与Flash动画下方空间类似的问题。（为embed/object标签添加display:block） - jessieloo

如果您仍希望它像图片一样显示在一行中，可以使用inline-block。 - Ian

@Ian @Imperative，“inline-block”似乎无法正常工作。 - p.matsinopoulos

然而，这会破坏 text-align:center。 - Rodrigo

Answer 3

快速解决方法：

为了消除图片下方的间隙，你可以采取以下措施：

• 将图片的 vertical-align 属性设置为 vertical-align: bottom;、vertical-align: top; 或者 vertical-align: middle;
• 将图片的 display 属性设置为 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>

---

为什么图片下面会有空隙？

图片下方的空隙并不是bug或问题，而是默认行为。造成这种情况的根本原因是图片是替换元素 (见MDN替换元素)。这使得它们可以“像图片一样运行”，拥有自己的内在尺寸、纵横比等。

浏览器计算它们的显示属性为inline，但它们给予了它们一种特殊的行为，使它们更接近于inline-block元素（如您可以垂直对齐它们，给它们高度，上/下边距和填充，转换等）。

这也意味着：

<img>没有基线，因此当图片在垂直对齐: 基线 的行内格式化上下文中使用时，图片底部将放置在文本基线上方。
(来源：MDN，强调我的)

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

( 图片来源)

与基线对齐的元素需要保留下方延伸超过基线的 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>标签的默认行为会在其容器底部创建一个间隙，而改变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>

- web-tiki

---

那么这就是为什么将字体大小设置为0不起作用。或者它起作用了吗？ - Persijn

@Persijn 是的。就像设置 line-height:0; 一样，但与更改垂直对齐或显示属性相比，我不认为这是一个好的解决方法。 - web-tiki

请注意，有些浏览器不支持 font-size:0：它们会将字体大小设置为用户设置中的最小大小。 - Mr Lister

是的，看起来是一个空格。 - Bengi Besçeli

嗯，我认为图片中的 middle、text-top、sub、super 位置不正确。 - xianshenglu

@xianshenglu，您是否有另一张突出基线且更准确的图片？如果有的话，我很乐意更换当前的图片。 - web-tiki

Answer 4

也可以将父元素的行高设为0：

#wrapper {
  line-height: 0;
}

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

- Pavlo

---

警告！这也会删除#wrapper中的任何文本节点，因为它将被继承。但是那个很棒的fiddler可以得到额外的加分！这里已更新包含文本节点的版本：http://jsfiddle.net/FaPFv/30/ - gcb

或者，字体大小：0 - Kiran

@mfluehr 请不要将JSFiddle中的实质内容复制到Stack Overflow上，用于他人的代码。JSFiddle没有发布许可证，您没有合法权利将他人的代码发布到Stack Overflow上，Stack Overflow在CC By-SA 4.0下授权其内容。 - TylerH

Answer 5

您所需做的就是分配该属性：

img {
    display: block;
}

默认情况下，这些图像具有以下属性：

img {
    display: inline;
}

- Daniel Díaz

Answer 6

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

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;  }

- Santosh Khalse

---

请不要推荐使用非常粗糙的 line-height 技巧，或者至���要清楚地解释为什么这是所有“解决方案”中最糟糕的一种：一旦有人在图片旁边放置文本（尤其是带有BR标签的预先格式化的多行文本），他们会发现自己比开始时处境更糟。 - Sz.

这对我来说是所有解决方案中最有帮助的。但是现在我的包装 div 已经扩展到超出主题图像，以前在 div 中使用 display:inline-block 可以修复它。谢谢。 - landed

Answer 7

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

- Abdulla khan

---

抱歉，-1会破坏文本定位，因此如果有人在图像旁边放置一些文本（尤其是多行文本，例如带有<BR>的文本），他们将会出现位置错误、重叠/悬挂混乱的情况。 - Sz.

Answer 8

我发现使用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编辑代码。

- Timothy

Answer 9

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

- akhilrawat001

Answer 10

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

- TomoMiha

---

因为设置 float:left 会导致 display:block。 - Kevin Boucher