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

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>

如果与前面的例子一致,那将会更好.

Answer 3

指定HTML就是这样做的:

换行符也是空格字符

Answer 4

可以使用html注释标签来连接代码，避免空格。

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