在Firefox中，只有我的视频缩略图在图像底部和边界之间神秘地显示了2-3个像素的空白(见下图)。
我在Firebug中尝试了我能想到的所有方法，但都没有成功。
我如何删除这个空白?
当前回答
给出div .youtube-thumb图像的高度。这应该会在Firefox浏览器中设置问题。
.youtube-thumb{ height: 106px }
其他回答
如前所述，图像被视为文本，因此底部是为了容纳那些讨厌的:“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>
有了这个问题，在其他地方找到了完美的解决方案，如果你不想使用块只是添加
img { vertical-align: top }
给出div .youtube-thumb图像的高度。这应该会在Firefox浏览器中设置问题。
.youtube-thumb{ height: 106px }
我发现了这个问题，这里没有一个解决方案对我有效。我找到了另一个解决方案，可以消除Chrome中图片下方的空白。我必须添加line-height:0;到我的CSS中的img选择器，图像下面的空白消失了。
不可思议的是，2013年的浏览器仍然存在这个问题。
因为img默认情况下是一个内联元素，所以您看到了下移元素(挂在'y'和'p'底部的位)的空间。这消除了差距:
.youtube-thumb img { display: block; }
