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

Question

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

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

有什么想法可以删除这个空白吗？

Answer 1

您会看到下降部分的空间（悬挂在“y”和“p”底部的位），因为

img

默认情况下是内联元素。这消除了间隙：

.youtube-thumb img { display: block; }

Answer 2

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

img{vertical-align:text-bottom}

或者您可以按照斯图尔特的建议使用以下内容：

img{vertical-align:bottom}

Answer 3

如果您想将图像保留为内联图像，您可以在其上放置

vertical-align: top

或

vertical-align: bottom

。默认情况下，它在基线上对齐，因此在它下面有几个像素。

Answer 4

我设置了一个 JSFiddle 来测试此问题的几种不同解决方案。基于

的[模糊]标准

1) 最大的灵活性

2）没有奇怪的行为

此处接受的答案是

img { display: block; }

很多人推荐的（比如这篇优秀的文章），实际上排名第四。

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

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

由于这个[某种]需要

vertical-align: top

上的

img

，这基本上是第一个解决方案的扩展。

优点：

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

缺点：

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

3）在父元素上设置

line-height: 0

：

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

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

优点：

• 在所有显示组合上的行为类似于前两个解决方案，除非父级和 img 具有“display: inline”。

缺点：

• 代码效率较低。
• 在父级和 img 都具有“display: inline”的情况下，我们会感到各种疯狂。 （也许使用“line-height”属性不是最好的主意......）

所以你已经得到它了。我希望这可以帮助一些可怜的灵魂。

Answer 5

我发现了这个问题，这里的解决方案都不适合我。我找到了另一个解决方案，可以消除 Chrome 中图像下方的空白。我必须将

line-height:0;

添加到 CSS 中的 img 选择器中，图像下方的间隙就消失了。

2013 年这个问题在浏览器中仍然存在，真是太疯狂了。

Answer 6

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

img { vertical-align: top }

Answer 7

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

Answer 8

给出 div 的高度

.youtube-thumb

图像的高度。这应该会在 Firefox 浏览器中解决问题。

.youtube-thumb{ height: 106px }

Answer 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>