图像标签下方的神秘空白区域[重复]答案

【问题标题】：Mystery white space underneath image tag [duplicate]图像标签下方的神秘空白区域[重复]
【发布时间】：2015-10-05 08:22:32
【问题描述】：

我刚刚更改了我网站上的标题图片

<div style="background-image... width=1980 height=350>

使用

<img src="... style="width:100%;">

所以图像会像现在这样缩小...

但现在我有这个神秘的 10 像素左右的间隙。

我检查了 Chrome 中的检查器，但我看不出是什么导致了这个空间。我搜索了其他帖子，但找不到任何适用的帖子。

有人知道吗？感谢任何帮助，鲍勃 :)

【问题讨论】：

标签： html css

【解决方案1】：

看看这行文字。请注意，没有违反基线的字母。

现在看下面这句话：

他可能只是过桥就逃走了。

注意字母j、g、p和y。这些字母在排版中称为descenders，违反了baseline。

the vertical-align property 的默认值为baseline。这适用于内联元素。

默认情况下，您的img 是内联级别的，并且与文本一样，span、input、textarea 和其他内联框与基线对齐。这允许浏览器提供必要的空间来容纳下行者。

请注意，间隙不是由边距或填充创建的，因此在开发人员工具中不容易检测到。这是由于基线对齐导致内容从容器底部边缘略微升高。

这里有几种处理方法：

将vertical-align: bottom 应用于img 标记。在某些情况下bottom 不起作用，因此请尝试middle、top 或text-bottom。

相关：

【讨论】：

Mind = 吹... 很好的描述。
In some cases bottom wont work这些是什么情况？
3 年前写答案时看到了异常。老实说，我现在不记得他们了。 @TemaniAfif
@TemaniAfif 如果您使用的是vertical-align: bottom 或middle，如果您的图片很小（小于行高），您可能会开始看到神秘空间出现在上方图像。 stackoverflow.com/questions/17905827/…。简化测试用例：jsbin.com/jotacipaqu/1/edit?html,css,output

【解决方案2】：

默认情况下，IMG 是一个内联元素。您需要将您的 IMG 标签设置为块元素，可以使用这种样式来完成：

display: block;

【讨论】：

哇，谢谢...我在这里找到了这个“缩放解决方案”：stackoverflow.com/questions/15458650/… - 他们没有包括那个。当然，在摆弄 css 大约 10 年后，我应该知道 :/ 再次感谢！ :)

【解决方案3】：

添加

display: block;

到<img>。

【讨论】：