删除图像下面的空白

Question

删除图像下面的空白

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

我在没有运气的情况下尝试了在Firebug中所能想到的一切。

如何删除这个空白？

Answer 1

如果不想修改块模式，可以使用下面的代码：img{vertical-align:text-bottom}或者，你可以像斯图尔特建议的那样使用以下方法：img{vertical-align:bottom}

Answer 2

我已经设置了一个JSFiddle测试此问题的几种不同解决方案。基于[模糊]标准1)最大灵活性2)没有奇怪的行为这里被接受的答案img { display: block; }这是很多人推荐的(如这篇优秀文章)，实际上排名第四。第一、第二和第三名都是这三种解决方案之间的一种折腾：1)戴夫·科克和哈桑·古尔索比给出的解决方案：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”，我们就会发疯。(也许玩“线高”属性不是最好的主意.)所以你拿到了。我希望这能帮助一些可怜的人。