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

【问题标题】：Why does the browser renders a newline as space?为什么浏览器将换行符呈现为空格？
【发布时间】：2010-10-09 22:57:03
【问题描述】：

一直以来，我一直想了解为什么浏览器会在渲染的 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 呈现给用户的时间。

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

谢谢。

【问题讨论】：

标签： html

【解决方案1】：

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

【讨论】：

【解决方案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

但是同样的样本可以由作者重写（关于 HTML 格式的强迫症:-)）：

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

如果这与前面的示例一致呈现会更好。

【讨论】：

我刚刚遇到这个问题，因为我面临着同样的问题。很好，解释性的答案。如果浏览器在上面的例子中需要一个空格而不考虑新行，那就太好了。我知道 Sublime 等文本编辑器可能会出现问题，它可以用来修剪空白，但这对我来说更有意义。这不能归结为文档类型（过渡，字符串等）吗？我的意思是我们托管了许多使用相同标记的网站，但我注意到某些网站上的空白比其他网站更多。如果文档类型是原因，我会密切关注这一点。
FWIW 两个 HTML sn-ps 不等价，后者将使用前导和尾随空格呈现。

【解决方案3】：

HTML 被指定为这样：

换行符也是空白字符

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

浏览器在这里出错：

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

【讨论】：