删除图像下方的空白[重复]答案

【问题标题】：Remove white space below image [duplicate]删除图像下方的空白[重复]
【发布时间】：2011-12-08 03:45:59
【问题描述】：

在 Firefox 中，只有我的视频缩略图会在我的图像底部和边框之间显示 2-3 像素的神秘空白（见下文）。

我在 Firebug 中尝试了所有我能想到的方法，但都没有成功。

我怎样才能删除这个空白？

【问题讨论】：

这里是这个问题的简短而完整的答案：stackoverflow.com/a/31445364/3597276
没有“display:block;”缺点的最简单的解决方案就是设置父元素的字体大小为0：

标签： css image whitespace border removing-whitespace

【解决方案1】：

您看到的是下行空间（挂在“y”和“p”底部的位），因为img 默认情况下是一个内联元素。这消除了差距：

.youtube-thumb img { display: block; }

【讨论】：

有效，但效果不佳。我在一个 div 中有 4 张图像，我想要它们 text-align: center 这不适用于块。
如果您需要图像与同一个盒子中的其他东西很好地搭配，请使用vertical-align: middle。在极少数情况下，该框包含几个小图像且没有文本，您可能需要在包含框上设置font-size: 0。
这行得通，但我使用了 Hasan Gürsoy 下面的另一个答案，因为他的答案不会导致 text-align:center 出现问题以及更改显示属性时发生的其他问题。
它消除了间隙，但也使它成为一个块元素。远非假设更改显示类型不会对布局产生其他重大影响。
@NathanHornby 不需要假设，布局是有问题的（最初的代码也是如此）

【解决方案2】：

如果你不想修改阻塞模式，可以使用下面的代码：

img{vertical-align:text-bottom}

或者您可以按照 Stuart 的建议使用以下内容：

img{vertical-align:bottom}

【讨论】：

text-bottom 仍然在 Chrome 中的图像下方留下另一个像素。我建议vertical-align:bottom。
第一个提供此解决方案的人是 Dave Kok，如果您不计算我对已接受答案的评论（从一个月前开始）。
这应该是公认的答案，因为它不会更改 img 标签的默认显示属性，稍后可能需要在其他地方“修复”！
Nvm，找到了为什么会这样：salman-w.blogspot.com/2012/10/…
当图片特别小（比父块元素的 line-height 短）时，vertical-align:bottom 会在图片上方留下空隙。希望很明显这是预期的：developer.mozilla.org/en-US/docs/Web/CSS/line-height“在块级元素上，line-height CSS 属性指定元素内行框的最小高度。”

【解决方案3】：

如果您想将图像保留为内联图像，您可以在其上添加vertical-align: top 或vertical-align: bottom。默认情况下，它在基线上对齐，因此它下面的几个像素。

【讨论】：

做得很好。您实际上还需要将图像设置为 inline-block 以使其在大多数浏览器中工作。

【解决方案4】：

我已经设置了一个JSFiddle 来测试这个问题的几种不同解决方案。基于[模糊]的标准

1) 最大的灵活性

2) 没有奇怪的行为

这里接受的答案

img { display: block; }

很多人推荐的（比如this excellent article），居然排在第四位。

一、二、三名都是这三个方案之间的折腾：

1)@Dave Kok 和@Hasan Gursoy 给出的解决方案：

img { vertical-align: top; } /* or bottom */

优点：

所有显示值都适用于父级和 img。
没有很奇怪的行为； img 的任何兄弟姐妹都会落在您期望的位置。
非常高效。

缺点：

在父节点和 img 都具有 `display: inline` 的 [完全有效] 情况下，此属性的值可以确定 img 父节点的位置（有点奇怪）。

2) 在父元素上设置font-size: 0;：

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

由于这种 [种类] 在 img 上需要 vertical-align: top，因此这基本上是第一种解决方案的扩展。

优点：

所有显示值都适用于父级和 img。
没有很奇怪的行为； img 的任何兄弟姐妹都会落在您期望的位置。
为 img 的任何同级修复了 inline whitespace problem。
虽然在 parent 和 img 都具有 `display: inline` 的情况下这仍然会移动 parent 的位置，但至少你不能再看到 parent。

缺点：

效率较低的代码。
这假定“正确”标记；如果 img 有文本节点兄弟，它们将不会显示。

3) 在父元素上设置line-height: 0：

.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}

类似于第二个解决方案，为了使其完全灵活，它基本上成为第一个的扩展。

优点：

在所有显示组合上的行为都与前两个解决方案类似，但父级和 img 具有 `display: inline` 时除外。

缺点：

效率较低的代码。
如果 parent 和 img 都具有 `display: inline`，我们会变得很疯狂。（也许使用 `line-height` 属性并不是最好的主意...）

所以你有它。我希望这可以帮助一些可怜的人。

【讨论】：

【解决方案5】：

我发现了这个问题，但这里的解决方案都不适合我。我找到了另一种解决方案，可以消除 Chrome 中图像下方的空白。我不得不在我的 CSS 中的 img 选择器中添加 line-height:0;，图像下方的空白就消失了。

这个问题在 2013 年的浏览器中仍然存在。

【讨论】：

是的，line-height: 0; 也对我有用。它在 2015 年仍然充满活力。
这个“问题”仍然存在，因为它不是错误。这就是内联格式上下文的工作原理。

【解决方案6】：

有这个问题，如果您不想使用块，请在其他地方找到完美的解决方案，只需添加

img { vertical-align: top }

【讨论】：

【解决方案7】：

.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}

【讨论】：

【解决方案8】：

给div的高度.youtube-thumb图片的高度。这应该在 Firefox 浏览器中设置问题。

.youtube-thumb{ height: 106px }

【讨论】：

【解决方案9】：

如前所述，图像被视为文本，所以底部是为了容纳那些讨厌的：“p,q,y,g,j”；最简单的解决方案是分配 img display:block;在你的 CSS 中。

但这确实会抑制与文本一起流动的标准图像行为。保持这种行为并消除空间。我建议用这样的东西包装图像。

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>

【讨论】：