为什么格式化字符像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都渲染我的回车符之间的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> 

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

Answer 2

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

例如，如果你打开一个新的HTML文档，并键入

hello 
world 

其结果将是“世界你好”

同样的结果将出现以下任何一项：

hello 


world 

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

hello world 

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

hello             world 

不管你是多么之间的“你好”和“世界”把空格只有一个会渲染。空白是CRLF还是空格字符无关紧要。