删除图像下面的空白

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”，我们就会发疯。(也许玩“线高”属性不是最好的主意.)

所以你拿到了。我希望这能帮助一些可怜的人。