移除图片下方的空白[重复]

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

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

.youtube-thumb{ height: 106px }

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

img{vertical-align:text-bottom}

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

img{vertical-align:bottom}

如果您希望将图像保留为嵌入式图像，则可以放置vertical-align: top或放置在图像vertical-align: bottom上。默认情况下，它在基线上对齐，因此其下方只有几个像素。

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

img { vertical-align: top }

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

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

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

.youtube-thumb img { display: block; }