删除图像下面的空白

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

我在Firebug中尝试了我能想到的所有方法，但都没有成功。

我如何删除这个空白?

图像下方显示空白的截图

238399 次浏览
小开

将div .youtube-thumb的高度赋给图像的高度。这应该会在Firefox浏览器中设置问题。

.youtube-thumb{ height: 106px }
小开
最佳答案

你看到的是下移符(挂在'y'和'p'底部的位)的空间，因为img默认是一个内联元素。这消除了差距:

.youtube-thumb img { display: block; }
小开 
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
小开

如果你想保留图像为内联，你可以在上面放置vertical-align: top或vertical-align: bottom。默认情况下，它是在基线上对齐的，因此它下面的几个像素。

小开

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

img{vertical-align:text-bottom}

或者你可以用Stuart建议的following:

img{vertical-align:bottom}
小开

有了这个问题，在其他地方找到了完美的解决方案，如果你不想使用块只是添加

img { vertical-align: top }
小开

我发现了这个问题，这里没有一个解决方案对我有效。我找到了另一个解决方案，可以消除Chrome中图片下方的空白。我不得不在CSS中的img选择器中添加line-height:0;，图像下面的空白消失了。

不可思议的是，2013年的浏览器仍然存在这个问题。

小开

如前所述，图像被视为文本，因此底部是为了容纳那些讨厌的:“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>
小开

我已经设置了一个< b > JSFiddle < / b >来测试这个问题的几个不同的解决方案。基于的[模糊的]标准

1)最大限度的灵活性

2)没有奇怪的行为

这里公认的答案是

img { display: block; }

它被很多人推荐(比如在这篇精彩的文章中)，实际上排名第四。

第一，第二和第三名都是在这三个解决方案之间摇摆不定:

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

由于这个[kind]需要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 '的情况下，我们得到了各种疯狂的结果。(也许使用“line-height”属性不是最好的主意…)

结果出来了。我希望这能帮助到一些可怜的人。


提交答案