为什么浏览器将换行符呈现为空格？

最长的时间，我想了解为什么浏览器在呈现的HTML元素之间存在换行符时在它们之间添加空白区域，例如：

<span>Hello</span><span>World</span>

上面的html将输出“ HelloWorld”字符串，在“ Hello”和“ World”之间没有空格，但是在以下示例中：

<span>Hello</span>
<span>World</span>

上面的html将输出“ Hello World”字符串，在“ Hello”和“ World”之间有一个空格。

现在，我可以毫无疑问地接受这只是工作周期的方式，但是令我有些烦恼的是，我总是觉得html元素之间的空格（或换行符）在何时不重要。浏览器将html呈现给用户。

所以我的问题是，是否有人知道这种行为背后的哲学或技术原因。

谢谢。

呈现时，浏览器将多个空格字符（包括换行符）压缩为一个空格。唯一的例外是<pre>元素内或CSS属性white-space设置为pre或的元素内pre-wrap。（或在XHTML中，xml:space="preserve"属性。）

块元素之间的空白将被忽略。但是，内联元素之间的空白将转换为一个空间。原因是内联元素可能会插入父元素的常规内部文本。

考虑以下示例：

<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p>

在理想情况下，您希望用户看到

This is my colored Hello World example

但是，删除两个跨度之间的空格将导致：

This is my colored HelloWorld example

但是该示例可以由作者（使用OCD编写有关HTML格式的:-）重写为：

<p>
  This is my colored
  <span class="red_text">Hello</span>
  <span class="blue_text">World</span>
  example
</p>

如果将它与前面的示例保持一致会更好。

HTML被指定为这样做：

换行符也是空格字符

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.1

您可以使用html注释标签连接代码，以免出现空格。

<p>
  This is my
  <span class="red_text">Hello</span><!--
  --><span class="blue_text">World</span>
  example
</p>

如果在两个标签之间有字符“ a”，则希望它被渲染。在这种情况下，两个标签之间有一个字符“ \ n”；行为相似且一致（'\ n'呈现为单个空格）。

浏览器在这里犯了一个错误：

http://www.w3.org/TR/html4/appendix/notes.html#hB.3.1

SGML（请参见[ISO8879]，第7.6.1节）指定必须忽略紧接在开始标记之后的换行符，也必须忽略紧接在结束标记之前的换行符。这毫无例外地适用于所有HTML元素。