Question

请参阅以下jsFiddle：http://jsfiddle.net/Leng/kQvNH/

任何人都可以解释为什么在每个水平点周围都会出现大量的填充（大约15px以上和4px以下）？图像只有2px高。填充物来自哪里？

请注意：

对我来说，当我用HTML5标题开始我的文档时，图像周围的神秘填充只发生：

<!DOCTYPE html>
<html>

图片正常显示（无填充）当我使用任何其他 - 标题时，例如HTML4或此网页的XHTML标题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

所以这似乎是HTML5的不一致。我想切换到标准的HTML5标题，但这个小烦恼阻止我这样做。

感谢您提供任何指导。

解决方案：

以下是解决方案的jsFiddle：http://jsfiddle.net/Leng/Sn2PC/

img
{
    display:block;
    margin:0 auto;
}

这是基于克里斯的答案。

请注意，设置font-size：0或line-height：0是不是的解决方案，因为这会（显然）混淆字体大小和行高。

同样，在HTML4或XHTML中完成正常的，居中的，未填充的图像时，不需要将显示设置为阻止并建立自动边距。

HTML5创建了这个“功能”，其中图像是内联的，并且将根据行高或字体大小进行填充。

Answer 1

我认为这是因为img元素是内联的。将font-size或line-height设置为小的东西会修复此问题。或者，将图像设置为display: block并在其上设置高度。

Answer 2

您的<img>标记显示为INLINED，因此它与普通文本一致。只需将容器的行高更改为更接近图像高度的值，字体大小（1px）就可以解决此问题。

因此，为了解释填充，图像周围没有填充。它是一个空行文本，其高度（行高）由用户代理定义。

fiddled here

Answer 3

你可以添加一个行高：2px;到#theDiv风格

图像周围的神秘填充/边缘

3 个答案: