html – 在严格模式下,图像后会出现神秘的填充/边距

发布时间：2020-12-14 21:39:58 所属栏目：资源来源：网络整理

导读：我创建了一个新的文档，与xhtml 1.0和html 4.01 STRICT只是为了隔离这一点。我所有的身体都是： div style="border: blue 3px solid;"img src="testimage.jpg" width="800" height="400"/div 结果是正常的，除了在图像下面有一个5px的空间，如果我将doctype

我创建了一个新的文档，与xhtml 1.0和html 4.01 STRICT只是为了隔离这一点。我所有的身体都是：

<div style="border: blue 3px solid;">
<img src="testimage.jpg" width="800" height="400">
</div>

结果是正常的，除了在图像下面有一个5px的空间，如果我将doctype更改为过渡，则会消失。
如果我将display：block设置为图像，它也会消失。

你可以在这里看到结果(我知道右边的空格是一个正常的，因为它是一个块元素)：http://i52.tinypic.com/2prd1jd.jpg

我尝试将margin / padding设置为0，即使这样：

*
{
   margin: 0; padding: 0;
}

但它仍然是一样的。

任何人都可以解释这个行为吗？

解决方法

它与图像的垂直对齐有关。尝试这个：

img{
 vertical-align: top;   
}

空间将消失。

要澄清一点，如果您在图像旁放置一些文字，您将看到这个问题。图像与文本的底部对齐，但像y和g这样的字母将低于该行。额外的空间是那些悬垂的信件。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!