为什么像CRLF这样的格式化字符被某些浏览器呈现为空格？

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正在渲染我的回车标签作为空格.我记不起以前遇到过这个问题了.我在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>元素是内联块,就像段落中的单词一样.