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

CSS

Davaid梅

2020-03-24

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

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

如何删除空白？

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

第3502篇《移除图片下方的空白\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
村村 2020.03.24

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

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

.youtube-thumb{ height: 106px }
西里Near 2020.03.24

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

img{vertical-align:text-bottom}

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

img{vertical-align:bottom}
凯西里 2020.03.24

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

老丝 2020.03.24

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

img { vertical-align: top }
西里村村 2020.03.24

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

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

小哥阳光 2020.03.24

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

.youtube-thumb img { display: block; }

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android