神秘填充/保证金图像周围

请看下面的jsfiddle：http://jsfiddle.net/Leng/kQvNH/神秘填充/保证金图像周围

任何人都可以解释为什么似乎是一个填充大量（约15像素的上方和下方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创建了这个“功能”，其中图像是内联的，并且将具有基于行高或字体大小的填充。

来源

2013-03-05 Leng

如果你让他们'浮动：左;'填充被删除:-) – tborychowski 2013-03-05 22:26:43

我不想液浮图片，我想相对定位的图像。 – Leng 2013-03-05 22:27:47

尝试在div – tborychowski 2013-03-05 22:29:43

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

来源

2013-03-05 22:27:25 ChrisC

'display：block'可能是最干净的解决方案 – TimPetricola 2013-03-05 22:32:03

谢谢Chris。在这里，他们正常显示您的建议：http://jsfiddle.net/yY9rx/ 我不知道为什么只需要为HTML5设置图像的显示？对于HTML4或XHTML来说并不是必需的。 – Leng 2013-03-05 22:32:54

我的荣幸，很高兴你的工作。 – ChrisC 2013-03-06 19:39:57

您可以添加行高：2px;以#theDiv风格

来源

2013-03-05 22:29:18

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

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

fiddled here

来源

2013-03-05 22:34:56

解决方法是更改显示以阻止图像，因为在您的图像中也有不必要的填充。看看他们离这个小提琴有多近 - http://jsfiddle.net/yY9rx/ – Leng 2013-03-05 22:38:38

如果你已经添加了一个字体大小：1px，那就可以做到这一点。但是，我们不想混淆字体，这就是我们使用display：block的原因。 – Leng 2013-03-05 22:40:00

你是对的，我忘了字体大小的地方.. – 2013-03-05 22:41:41

神秘填充/保证金图像周围

回答

相关问题