282

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

我已经尝试了我在 Firebug 中能想到的一切，但没有运气。

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

屏幕截图显示图像下方的空白

4

9 回答 9

571

您会看到下降者的空间（悬挂在“y”和“p”底部的位），因为img默认情况下是内联元素。这消除了差距：

.youtube-thumb img { display: block; }
于 2011-10-15T00:21:34.690 回答
148

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

img{vertical-align:text-bottom}

或者您可以按照 Stuart 的建议使用以下内容：

img{vertical-align:bottom}
于 2013-02-06T02:54:42.693 回答
32

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

于 2012-12-14T09:44:48.410 回答
29

我已经建立了一个JSFiddle来测试这个问题的几种不同的解决方案。基于[模糊]标准

1) 最大的灵活性

2）没有奇怪的行为

这里接受的答案

img { display: block; }

很多人推荐的（比如这篇优秀的文章），其实排在第四位。

第一名、第二名和第三名都是这三个解决方案之间的折腾：

1）@Dave Kok 和@Hasan Gursoy 给出的解决方案：

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

优点：

  • 所有显示值都适用于父级和 img。
  • 没有很奇怪的行为；img 的任何兄弟姐妹都会落在您期望的位置。
  • 非常有效率。

缺点：

  • 在 parent 和 img 都具有 `display: inline` 的 [perfectly valid] 情况下，此属性的值可以确定 img 的 parent 的位置（有点奇怪）。

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 的任何同级的内联空格问题。
  • 尽管在 parent 和 img 都具有 `display: inline` 的情况下，这仍然会移动 parent 的位置，但至少您再也看不到 parent。

缺点：

  • 效率较低的代码。
  • 这假设“正确”标记；如果 img 有文本节点兄弟姐妹，它们将不会出现。

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

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

与第二个解决方案类似，为了使其完全灵活，它基本上成为第一个的扩展。

优点：

  • 在所有显示组合上的行为类似于前两个解决方案，除非父级和 img 具有 `display: inline`。

缺点：

  • 效率较低的代码。
  • 在 parent 和 img 都有`display: inline`的情况下，我们会变得很疯狂。（也许使用 `line-height` 属性并不是最好的主意......）

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

于 2015-12-06T04:20:29.803 回答
11

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

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

于 2013-06-25T00:12:49.517 回答
7

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

img { vertical-align: top }
于 2013-04-23T08:29:50.403 回答
5 
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
于 2012-07-16T15:48:16.260 回答
0

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

.youtube-thumb{ height: 106px }
于 2011-10-15T00:16:00.313 回答
0

如前所述，图像被视为文本，因此底部是为了容纳那些讨厌的：“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>
于 2015-06-27T04:34:03.670 回答