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

Question

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

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

使用

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

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

但现在我有这个神秘的10px差距左右.

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

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

Answer 1

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

现在看下面这句话:

通过过桥,他可能已经离开了.

注意字母j,g,p和y.这些字母在排版中称为下降,突破了基线.

^{来源:Wikipedia.org}

的默认值的vertical-align属性是baseline.这适用于内联级元素.

你img是行内默认情况下,像文字span,input,textarea和其他行内框,对齐基线.这允许浏览器提供容纳下行所需的空间.

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

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

1. 适用vertical-align: bottom于img标签.在某些情况下bottom不会工作,所以尝试middle,top或text-bottom.

2. 切换display: inline到display: block.

3. 调整line-height容器上的属性.在您的代码引用中(由于linkrot删除),line-height: 0做了诀窍.

4. font-size: 0在容器上设置一个.如有必要,可以直接在子元素上恢复font-size.

有关:

• 为什么我的textarea比邻居更高？

Answer 2

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

display: block;

Answer 3

加

display: block;

到了<img>.