删除图像下方的空白区域

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

许多人推荐的

（例如在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;
}

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

的优点：

• 所有显示值均适用于父级和img。
• 没有非常奇怪的行为; img的任何兄弟姐妹都会落在你期望的地方。
• 修复了img的所有兄弟姐妹的inline whitespace problem。
• 虽然在父级和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

如前所述，图像被视为文本，因此底部是为了适应那些讨厌的人：＆＃34; p，q，y，g，j＆＃34 ;;最简单的解决方案是分配img display：block;在你的CSS。

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

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