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

Question

长期以来，我一直想了解为什么当HTML元素之间有一个换行符时，浏览器会在它们之间添加一个空格，例如：

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

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

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

上面的HTML将输出一个"Hello World"字符串，"Hello"和"World"之间有一个空格。

现在，我无法接受这就是它工作的方式，但让我有点困扰的是，在浏览器将HTML呈现给用户时，我一直认为HTML元素之间的空格（或换行符）并不重要。

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

谢谢。

- Rene

Answer 1

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

- David

---

or white-space: pre-line; - Andrew Evt

据我所知，pre-line仍会导致多个空格被折叠，除了换行符。不过你的评论让我找到了pre-wrap。 - David Z

对我来说，“white-space” 属性被设置为 “break-spaces”。在删除此属性后，我的问题得到了解决。 - mrasoolmirzaei

对于未来的读者，我发现这篇MDN文章有助于理解浏览器如何确定在哪里添加空格。 - incutonez

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

然而，删除两个span之间的空格将产生以下结果：

This is my colored HelloWorld example

但是同样的示例可以由一个（对HTML格式有强迫症的）作者重写为：

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

如果这个示例与前一个示例呈现方式保持一致，那就更好了。

- Franci Penov

---

我刚遇到了同样的问题，看到了这个解释得很好的答案。如果浏览器在上面的例子中要求跨度之间有空格，无论是否换行，那就太好了。我知道这可能会导致像Sublime这样的文本编辑器出现问题，因为它可以被设置为修剪空格，但对我来说更有意义。这不是由于文档类型（过渡、字符串等）吗？我的意思是，我们托管了许多使用相同标记的网站，但我注意到在某些网站上比其他网站更多地出现了空格。我会继续关注这个问题，以确定文档类型是否是原因。 - ClarkeyBoy

就此而言，这两个HTML片段并不相等，后者将呈现为具有前导和尾随空格的形式。 - McSinyx

Answer 3

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

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

- Zhang Qun

---

这个有效。丑得要命，但是它有效。谢谢你提供这个。 - Joshua Pinter

Answer 4

HTML规定如下：

换行也是空白字符之一

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

- webjunkie

Answer 5

如果您在两个标签之间放置字符'a'，则预期该字符将被呈现。在这种情况下，您在两个标签之间有一个字符'\n'，行为类似且一致（'\n'呈现为单个空格）。

- SquareCog

Answer 6

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

http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.1

SGML（参见[ISO8879]，第7.6.1节）规定，在开始标记后紧接着的换行符必须被忽略，同样，在结束标记前紧接着的换行符也必须被忽略。这适用于所有HTML元素，没有例外。

- Thomas Müller

---

不，你在这里犯了一个错误：原帖示例中的换行符号是在结束标签之后！ - Tim Pietzcker