div 内的图像在图像下方有额外的空间-解网

问：

为什么在下面的代码中，的高度大于的高度？图像下方有一个间隙，但似乎不是填充/边距。divimg

图片下方的间隙或额外空间是什么？

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

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

Image with a gap or white space under it

HTML CSS 图像

7赞 Matheus Avellar 9/30/2017

这里有一本关于这个问题的好书： HTML 中奇怪的 <img> 差距

答：

878赞 Quentin 4/27/2011 #1

默认情况下，图像以内联方式呈现，就像一个字母一样，因此它与 a、b、c 和 d 位于同一行上。

该行下方有空间用于您在 g、j、p 和 q 等字母上找到的降序。

您可以：

调整图像的垂直对齐方式以将其放置在其他位置（例如）或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>

所包含的图像是公共领域，来源于维基共享资源

15赞 Kevin Boucher 5/16/2015

更准确地说，这种情况发生在 b/c 内联元素占用其当前空间。设置为所需的尺寸也将克服不需要的空格。line-heightline-height

3赞 j08691 2/18/2016

“f”是否有资格作为下降者？

3赞 Quentin 2/18/2016

@j08691 — 取决于字体。

5赞 Oliver Joseph Ash 11/16/2020

请注意，如果您使用的是或，如果图像较小（小于行高），则可能会开始看到图像上方出现神秘空间。stackoverflow.com/questions/17905827/....减少测试用例：jsbin.com/jotacipaqu/1/edit?html,css,outputvertical-align: bottommiddle

166赞 Thea 8/26/2011 #2

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

5赞 jessieloo 12/19/2012

谢谢。这也修复了 Flash 影片下方空间的类似问题。（添加了 display：block to embed/object 标签）

5赞 Ian 8/11/2014

或者，如果您仍然希望它像图像一样以内联方式显示。inline-block

13赞 p.matsinopoulos 11/16/2015

@Ian @Imperative似乎不起作用。inline-block

0赞 Rodrigo 7/25/2021

然而，这打破了.text-align:center

52赞 Pavlo 12/20/2012 #3

还可以取消父项的行高：

#wrapper {
  line-height: 0;
}

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

8赞 gcb 1/9/2014

警告！这也将终止 #wrapper 中的任何文本节点。因为它将被继承。但是给那个了不起的小提琴手加分！在这里，它使用文本节点进行更新。jsfiddle.net/FaPFv/30

1赞 Kiran 1/22/2020

或者，font-size：0

0赞 TylerH 1/10/2022

@mfluehr 请不要将 JSFIddle 中的实质性内容复制到 Stack Overflow 中，以获取他人的代码。JSFiddle 不发布许可证，您也没有合法权利将其他人的代码发布到 Stack Overflow，后者根据 CC By-SA 4.0 许可其内容。

-1赞 TomoMiha 12/4/2013 #4

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

17赞 Kevin Boucher 5/16/2015

这是因为设置原因float:leftdisplay:block

5赞 Abdulla khan 4/24/2014 #5

我用过，它对我来说效果很好。line-height:0

1赞 Sz. 9/10/2019

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

4赞 Timothy 11/18/2014 #6

我发现它使用 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

142赞 web-tiki 1/23/2016 #7

快速修复：

要移除图片下方的间隙，您可以：

将图像的 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>

解释：为什么图片下面有缝隙？

图像下方的间隙或额外空间不是错误或问题，而是默认行为。根本原因是图像被替换元素（参见 MDN 替换元素）。这使它们能够“像图像一样行事”，并具有自己的内在尺寸、纵横比。
浏览器计算它们的显示属性，但它们赋予它们一种特殊的行为，使它们更接近元素（因为您可以垂直对齐它们，为它们提供高度、上/下边距和填充、转换......inlineinline-block

这也意味着：

<img>没有基线，因此当图像以内联格式使用时带有 vertical-align： baseline 的上下文，图像的底部将是放置在文本基线上。
（来源：MDN，强调我的)

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

(图片来源)

基线对齐的元素需要为延伸到基线以下的下降器留出空间（如），如上图所示。在此配置中，图像的底部在基线上对齐，如以下示例所示：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>

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

0赞 Persijn 1/23/2016

所以这就是为什么将 font-size 设置为 0 不起作用的原因。或者是吗？

2赞 web-tiki 1/23/2016

@Persijn确实如此。喜欢设置，但与更改垂直对齐或显示属性相比，我不认为这是一个很好的解决方法line-height:0;

3赞 Mr Lister 12/7/2017

但是请注意，某些浏览器不尊重：它们在用户设置中将字体大小设置为最小大小。font-size:0

0赞 Bengi Besçeli 1/23/2018

是的，这似乎是一个空白。

0赞 xianshenglu 5/19/2018

嗯，我觉得图中的位置不对。middletext-topsubsuper

15赞 Daniel Díaz 11/3/2016 #8

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

img {
    display: block;
}

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

img {
    display: inline;
}

11赞 Santosh Khalse 1/4/2017 #9

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

用line-height
```
#wrapper {  line-height: 0px;  }
```

用display: flex

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

使用、和display:blocktableflexinherit

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

5赞 Sz. 9/10/2019

请不要推荐非常草率的黑客，或者至少要明确说明为什么它是最糟糕的“解决方案”：当有人在图像旁边放置文本（尤其是带有 BR 标签的预格式化多行）时，他们会发现自己处于比开始时更糟糕的境地。line-height

0赞 landed 3/17/2021

这对我所有解决方案的帮助最大。但是，我现在的包装 div 扩展到了主题图像之外，以前在 div 中显示内联块修复了这一点。泰

0赞 akhilrawat001 8/24/2021 #10

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

上一个：在弹性框容器中将徽标左对齐居中，将文本对齐右对齐

下一个：CSS 弹性框 |网格图块放置问题 [已关闭]

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

Image inside div has extra space below the image

评论

评论

评论

评论

评论

评论

快速修复：

解释：为什么图片下面有缝隙？

评论

评论