删除图像下方的空白区域

Question

在Firefox中,只有我的视频缩略图在我的图像底部和边框之间显示神秘的2-3像素空白区域(见下文).

我已经尝试过在Firebug中我能想到的一切,但没有运气.

如何删除此空格？

Answer 1

你看到了下行空间(从'y'和'p'底部悬挂的位),因为img默认情况下它是一个内联元素.这消除了差距:

.youtube-thumb img { display: block; }

Answer 2

如果您不想修改阻止模式,可以使用下面的代码:

img{vertical-align:text-bottom}

或者您可以使用以下Stuart建议:

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