CSS 删除图像下方的空白

Remove white space below image

提问by Ryan

In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below).

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

I've tried everything I can think of in Firebug with no luck.

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

How can I remove this white space?

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

回答by robertc

You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because imgis an inline element by default. This removes the gap:

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

.youtube-thumb img { display: block; }

回答by HasanG

You can use code below if you don't want to modify block mode:

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

img{vertical-align:text-bottom}

Or you can use following as Stuart suggests:

或者您可以按照斯图尔特的建议使用以下内容：

img{vertical-align:bottom}

回答by Dave Kok

If you would like to preserve the image as inline you can put vertical-align: topor vertical-align: bottomon it. By default it is aligned on the baseline hence the few pixels beneath it.

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

回答by bowheart

I've set up a JSFiddleto test several different solutions to this problem. Based on the [vague] criteria of

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

1) Maximum flexibility

2) No weird behavior

1) 最大的灵活性

2）没有奇怪的行为

The accepted answer here of

这里接受的答案

img { display: block; }

which is recommended by a lot of people (such as in this excellent article), actually ranks fourth.

很多人推荐的（比如在这篇优秀文章中），实际上排名第四。

1st, 2nd, and 3rd place are all a toss-up between these three solutions:

第 1、2 和 3 名都是这三个解决方案之间的折腾：

1) The solution given by @Dave Kok and @Hasan Gursoy:

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

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

pros:

优点：

• All display values work on both the parent and img.
• No very strange behavior; any siblings of the img fall where you'd expect them to.
• Very efficient.

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

cons:

缺点：

• In the [perfectly valid] case of both the parent and img having `display: inline`, the value of this property can determine the position of the img's parent (a bit strange).

• 在 parent 和 img 都有 `display: inline` 的 [完全有效] 的情况下，这个属性的值可以确定 img 的 parent 的位置（有点奇怪）。

2) Setting font-size: 0;on the parent element:

2）font-size: 0;在父元素上设置：

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

Since this one [kind of] requires vertical-align: topon the img, this is basically an extension of the 1st solution.

由于这个 [kind of] 需要vertical-align: top在 上img，这基本上是第一个解决方案的扩展。

pros:

优点：

• All display values work on both the parent and img.
• No very strange behavior; any siblings of the img fall where you'd expect them to.
• Fixes the inline whitespace problemfor any siblings of the img.
• Although this still moves the position of the parent in the case of the parent and img both having `display: inline`, at least you can't see the parent anymore.

• 所有显示值都适用于父级和 img。
• 没有很奇怪的行为；img 的任何兄弟姐妹都落在您期望的地方。
• 修复了 img 的任何兄弟姐妹的内联空白问题。
• 尽管在父级和 img 都有 `display: inline` 的情况下，这仍然会移动父级的位置，但至少你看不到父级了。

cons:

缺点：

• Less efficient code.
• This assumes "correct" markup; if the img has text node siblings, they won't show up.

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

3) Setting line-height: 0on the parent element:

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

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

Similar to the 2nd solution in that, to make it fully flexible, it basically becomes an extension of the 1st.

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

pros:

优点：

• Behaves like the first two solutions on all display combinations except when the parent and img have `display: inline`.

• 在所有显示组合上的行为与前两种解决方案相似，除非 parent 和 img 具有 `display: inline`。

cons:

缺点：

• Less efficient code.
• In the case of both the parent and img having `display: inline`, we get all sorts of crazy. (Maybe playing with the `line-height` property isn't the best idea...)

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

So there you have it. I hope this helps some poor soul.

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

回答by ZivBK1

I found this question and none of the solutions here worked for me. I found another solution that got rid of the gaps below images in Chrome. I had to add line-height:0;to the img selector in my CSS and the gaps below images went away.

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

Crazy that this problem persists in browsers in 2013.

2013 年浏览器还存在这个问题。

回答by Andrew

Had this prob, found perfect solution elsewhere if you dont want you use block just add

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

img { vertical-align: top }

回答by Brynner Ferreira

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

回答by Mahesh

Give the height of the div .youtube-thumbthe height of the image. That should set the problem in Firefox browser.

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

.youtube-thumb{ height: 106px }

回答by Mardok

As stated before, the image is treated as text, so the bottom is to accommodate for those pesky: "p,q,y,g,j"; the easiest solution is to assign the img display:block; in your css.

如前所述，图像被视为文本，所以底部是为了适应那些讨厌的：“p,q,y,g,j”；最简单的解决方案是分配 img display:block; 在你的 css 中。

But this does inhibit the standard image behavior of flowing with the text. To keep that behavior and eliminate the space. I recommend wrapping the image with something like this.

但这确实抑制了随文本流动的标准图像行为。保持这种行为并消除空间。我建议用这样的东西包装图像。

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>