像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严格的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

您之间的“你好”和“世界”不管有多少空格只放一个将呈现。如果空白是一个CRLF或空格字符也没关系。