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

很长一段时间以来，我一直想理解为什么当呈现的HTML元素之间有换行符时，浏览器会在它们之间添加空白，例如：

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

HelloWorld

上面的html将输出“HelloWorld”字符串，在“Hello”和“World”之间不带空格，但在以下示例中：

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

This is my colored Hello World example

你好 世界 上面的html将输出一个“Hello World”字符串，在“Hello”和“World”之间有一个空格

现在，我可以接受这只是它的工作方式，但让我有点困扰的是，我总是觉得在浏览器向用户呈现html时，html元素之间的空格（或换行符）并不重要

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

---

谢谢。

浏览器在渲染时将多个空格字符（包括换行符）压缩到单个空格。唯一的例外情况是

元素内或那些设置为

pre

或

pre wrap

的元素。（或者在XHTML中，是

xml:space=“preserve”

属性。）

如果在两个标记之间有字符“a”，则期望它被呈现。在本例中，两个标记之间有一个字符“\n”；行为类似，且一致（“\n”呈现为单个空格）。

HTML指定如下操作：

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

换行符也是空白字符

---

块元素之间的空白被忽略。但是，内联元素之间的空白将转换为一个空间。原因是内联元素可能与父元素的规则内部文本相互交错

考虑以下示例：

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

This is my colored Hello World example

但是，删除两个跨距之间的空白将导致：

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

但同一个示例可以由作者（OCD关于HTML格式：-）重写为：

这是我的彩色照片
你好
世界
例子

---

如果与前面的示例一致，则效果会更好。

浏览器在此处出错：

---

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

您可以使用HTML注释标记连接代码以避免空格

这是我的
你好世界
例子

不，您在这里犯了一个错误：OP示例中的换行符在结束标记之后！我刚刚遇到这个问题，因为我正面临着同样的问题。很好的解释性回答。在上面的例子中，如果浏览器在跨距之间需要一个空格，而不考虑新行，那就好了。我知道像Sublime这样的文本编辑器可能会有问题，它可以用来修剪空白，但对我来说更有意义。这不能归结为doctype（过渡、字符串等）吗？我的意思是，我们拥有许多使用相同标记的网站，但我注意到一些网站上的空白比其他网站上的空白多得多。如果原因是doctype，我会注意这一点@AndrewEvt据我所知，

行前

仍然会导致多个空格折叠，除了换行符。虽然你的评论确实让我找到了

预包装

。