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

Answer 5

如果你有两个标签之间的字符'a'，你会期望它被渲染。在这种情况下，两个标签之间有一个字符'\ n';行为是类似的，并且是一致的（'\ n'呈现为单个空格）。

Answer 6

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

SGML（参见[ISO8879]，第7.6.1节）规定必须忽略紧跟在开始标记之后的换行符，并且必须在结束标记之前立即换行。这适用于所有HTML元素，无一例外。