删除图像下方的空白

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

因为这个 [kind of] 需要在父元素上设置 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>