为什么浏览器将换行符渲染为空格？

Question

为什么浏览器将换行符渲染为空格？在最长的时间里，我想了解为什么浏览器在呈现的HTML元素之间添加一个空格，当它们之间存在NewLine时，例如：<span>Hello</span><span>World</span>上面的html将输出“HelloWorld”字符串，而 “Hello”和“World”之间没有空格，但是在以下示例中：<span>Hello</span><span>World</span>上面的html将输出一个“Hello World”字符串，其中包含“Hello”和“World”之间的空格。现在，我毫不犹豫地接受这只是它工作时间的方式，但是让我感到困惑的是，我总是认为html元素之间的空格（或换行符）在当时并不重要。浏览器将html呈现给用户。所以我的问题是，如果有人知道这种行为背后的哲学或技术原因。谢谢。

Answer 1

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

Answer 2

块元素之间的空格被忽略。但是，内联元素之间的空格会转换为一个空格。原因是内联元素可能散布在父元素的常规内部文本中。

请考虑以下示例：

<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>

如果与前面的例子一致，那将会更好。