在图象标记下的奥秘白色空间

Question

我刚从

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

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

使用

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

所以图像会缩小它现在的尺寸......

但现在我有这个神秘的10px差距。

我已经检查了Chrome中的检查员，我只是看不出是什么造成了这个空间。我搜索了其他帖子，但找不到任何适用的内容。

有人知道吗？感谢任何帮助，Bob：）

Answer 1

  

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

现在看下面这句话：

  

过桥时他可能已经离开了。

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

^{来源：Wikipedia.org}

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

默认情况下，您的img为内联级别，与文字一样，span，input，textarea和其他内联框与基线对齐。这允许浏览器提供容纳下行程序所需的空间。

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

以下是处理此问题的几种方法：

1. 将vertical-align: bottom应用于img标记。在某些情况下，bottom无效，请尝试middle，top或text-bottom。
1. 从display: inline切换到display: block。
1. 调整容器上的line-height属性。在您的代码引用中（由于linkrot已删除），line-height: 0完成了这一操作。
1. 在容器上设置font-size: 0。如有必要，您可以直接在子元素上恢复font-size。

相关：

• Why is my textarea higher up than its neighbor?

Answer 2

默认情况下，IMG是内联元素。您需要将IMG标记设置为块元素，可以使用以下样式完成：

display: block;

Answer 3

添加

display: block;

到<img>。