图片标签下方的神秘空白处
我只是改变了我网站上的标题图片
<div style="background-image... width=1980 height=350>
使用
<img src="... style="width:100%;">
所以图像会缩小，现在它…
但是现在我有了这个神秘的10px左右的差距。
我已经在Chrome中检查了检查员，而我只是看不到造成这个空间的原因。 我已经搜索了其他帖子，但找不到任何适用的内容。
任何人有什么想法？ 感谢任何帮助，Bob 🙂
默认情况下，IMG是一个内联元素。 你需要设置你的IMG标签是一个块元素，可以用这种风格完成：
display: block;
看看这行文字。 注意没有违反基准的字母。
现在看下面的句子：
只要穿过桥，他可能就跑了。
请注意字母j ， g ， p和y 。 这些字母在排版中被称为下行字 ，违反了基准 。
来源： Wikipedia.org
vertical-align属性的默认值是baseline 。 这适用于内联级元素。
您的img默认是内联级别，并且与文本， span ， input ， textarea和其他内联框一样，都与基线对齐。 这允许浏览器提供适应下行的必要空间。
请注意，差距不是由margin或padding创建的，因此在开发人员工具中检测并不容易。 基线对齐导致容器底部边缘的内容略有升高。
这里有几种方法来处理这个问题：
- 将
vertical-align: bottom应用于img标签。 在某些情况下，bottom将不起作用，所以请尝试middle，top或text-bottom。
- 从
display: inline切换到display: block。
- 调整容器上的
line-height属性。 在你的代码引用（因为被删除，因为linkrot ），line-height: 0做的窍门。
- 在容器上设置一个
font-size: 0。 如有必要，您可以直接恢复子元素的字体大小。
有关：
- 为什么我的textarea高于邻居？
加
display: block;
到<img> 。
