删除图片下方的空白处

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

我尝试了所有我能想到的在Firebug中没有运气。

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

Answer 1

你看到的下行空间（位于'y'和'p'底部的位），因为img默认是内联元素。 这消除了差距：

 .youtube-thumb img { display: block; } 

Answer 2

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

 img{vertical-align:text-bottom} 

或者你可以使用以下Stuartbuild议：

 img{vertical-align:bottom} 

Answer 3

如果你想保持图像内联，你可以把vertical-align: top或vertical-align: bottom上。 默认情况下，它在基线上alignment，因此它下面的几个像素。

Answer 4

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

1）最大的灵活性

2）没有怪异的行为

这里接受的答案

 img { display: block; } 

这是很多人推荐的（如这篇优秀的文章 ），居第四位。

第一，第二和第三名都是这三种解决scheme之间的折腾：

1）由@Dave Kok和@Hasan Gursoy提供的解决scheme：

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

优点：

• 所有显示值都在父级和img上工作。
• 没有很奇怪的行为; img的任何兄弟姐妹都会落在你期望的地方。
• 非常有效。

缺点：

• 在具有`display：inline`的parent和img [完全有效]的情况下，这个属性的值可以决定img的父对象的位置（有点奇怪）。

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

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

由于这一种[types]需要img上的vertical-align: top ，这基本上是第一种解决scheme的扩展。

优点：

• 所有显示值都在父级和img上工作。
• 没有很奇怪的行为; img的任何兄弟姐妹都会落在你期望的地方。
• 修复了img的任何兄弟的内联空白问题 。
• 虽然这仍然移动父母的情况下父母和img都有`display：inline`，至less你不能再看到父母的位置。

缺点：

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

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

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

类似于第二种解决scheme，为了使其充分灵活，基本成为第一种的延伸。

优点：

• 行为就像所有显示组合中的前两个解决scheme，除非父母和img具有`display：inline`。

缺点：

• 效率较低的代码。
• 在父和img有`display：inline`的情况下，我们会变得疯狂。 （也许玩“line-height”属性不是最好的主意……）

所以你有它。 我希望这有助于一些可怜的灵魂。

Answer 5

我发现这个问题，这里没有任何解决scheme为我工作。 我发现另一个解决scheme，摆脱了Chrome中图像下方的空白。 我不得不添加line-height:0; 到我的CSS中的imgselect器，图像下面的差距就消失了。

疯狂的是，这个问题在2013年仍然在浏览器中。

Answer 6

有了这个概率，find完美的解决scheme，如果你不希望你使用块只是添加

 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”; 最简单的解决scheme是分配img display：block; 在你的CSS。

但是这样做抑制了文本stream畅的标准图像行为。 保持这种行为，消除空间。 我build议用这样的东西包装图像。

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