Question

我需要有人向我解释这个额外的填充来自包含img元素的div。

您可以前往http://www.dev12.com/CSSTest了解我的两个问题的实例。

问题＃1 ： Safari，Firefox和Opera在容器div上渲染大约6个像素的不需要的底部填充。如果我明确地将填充设置为0px并不重要。

问题＃2 ：如果我格式化我的代码，以便每个图像都在我的html文件中的自己的行上，则每个图像都会添加额外的6个像素的右边距。例如，以下代码块在两个图像之间呈现不需要的填充：

<div>
    <span><img src="button.gif" /></span>
    <span><img src="button.gif" /></span>
</div>

但是，此代码块没有不需要的空间：

<div>
    <span><img src="button.gif" /></span><span><img src="button.gif" /></span>
</div>

很明显，Safari，Firefox和Opera正在将span标签之间的回车渲染为空格。我记不起以前遇到过这个问题了。我在Textmate中编写代码。有什么设置我应该注意防止这种情况吗？

我总是使用XHTML 1.0 Strict doctype。这对我来说尤其令人困惑，因为它是如此简陋。有人帮我理解这个！

KN

Answer 1

＃1 这是因为内嵌图像的默认基线对齐 - 您看到的额外空间是为下行保留的（字母低于基线：g，p，q，y，在图像周围的文字中。（事实上，你没有文字是无关紧要的 - 他们的空间仍然是保留的。）

你可以像这样摆脱它：

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

＃2 换行符是空格，并显示为空格。如果您有这样的HTML：

<p>This is a sentence
in a paragraph.<p>

你希望浏览器在“句子”和“输入”之间加一个空格，不是吗？ <img>元素是内联块，就像段落中的单词一样。

Answer 2

如果我没记错的话，HTML规范说源文件中的任何和所有空格都将呈现为单个空格。

例如，如果您打开一个新的HTML文档并输入

hello
world

结果将是“你好世界”

以下任何一项都会显示相同的结果：

hello


world

------或----------

hello world

------或----------

hello                                                 world

无论你在“hello”和“world”之间放置多少空格，只有一个会呈现。如果空格是CRLF或空格字符也无关紧要。