在HTML中，空格什么时候重要？

现在，

bold

前面的空格很重要

例4

一个勇敢的人

现在只有一个空格（在“a”之后或在“bold”之前）是有意义的

问题

---

删除或折叠空格的确切规则是什么？

HTML将序列空格折叠为单个空格，但不会消除它。换行符是空白，因此是空格

它不仅仅是前导/尾随-元素中的序列空格也被呈现为单个空格。这些将以相同的方式呈现：

<div>   a   b   </div>
<div> a b </div>
<div>a b</div>

ab
a b
a b

HTML将序列空格压缩为单个空格，但不会消除它。换行符是空白，因此是空格

它不仅仅是前导/尾随-元素中的序列空格也被呈现为单个空格。这些将以相同的方式呈现：

<div>   a   b   </div>
<div> a b </div>
<div>a b</div>

ab
a b
a b

关于“空白在HTML中什么时候重要？”这个问题的完整答案将是相当长和详细的，并且需要使用特殊规则（如

textarea

）讨论属性规范和元素之间的空白等问题。但这似乎是最主要的问题：

标记之间的空白通常会创建匿名文本节点。叶元素（不包含其他元素的元素）内的空白构成元素文本内容的一部分

很少有固定的呈现规则，但浏览器通常会忽略元素文本内容中的前导和尾随空格

如果内联呈现的元素之间存在空格（例如默认情况下的

按钮

元素），它通常充当相当于一个空格的分隔符

但是，由一个换行符组成的空白被忽略，通常在浏览器实践中，当它紧跟在开始标记之后或结束标记之前时。所以

<div>
<button>one</button>
<button>two</button>
</div>

一
二

将被视为没有换行符。但当使用空格时，如

<div>
  <button>one</button>
  <button>two</button>
</div>

一
二

然后，在第一个

按钮

元素之前以及两个

按钮

元素之间存在匿名文本节点。通常只有后者才重要，它的行为就像一个正常的单词空间

---

更新：正如下面的评论和Alohci的回答所指出的，这一古老的（HTML4.01）原则大部分没有在浏览器中实现，大部分已经在HTML5中删除。因此，在大多数情况下，元素之间的换行符会创建一个文本节点，其中包含一个换行字符，该字符被视为等同于一个空格。

这是对“空白在HTML中何时重要”问题的完整回答将是相当长和详细的，并且需要讨论诸如属性规范和具有特殊规则（如

textarea

）的元素之间的空白之类的问题。但这似乎是最主要的问题：

标记之间的空白通常会创建匿名文本节点。叶元素（不包含其他元素的元素）内的空白构成元素文本内容的一部分

很少有固定的呈现规则，但浏览器通常会忽略元素文本内容中的前导和尾随空格

如果内联呈现的元素之间存在空格（例如默认情况下的

按钮

元素），它通常充当相当于一个空格的分隔符

但是，由一个换行符组成的空白被忽略，通常在浏览器实践中，当它紧跟在开始标记之后或结束标记之前时。所以

<div>
<button>one</button>
<button>two</button>
</div>

一
二

将被视为没有换行符。但当使用空格时，如

<div>
  <button>one</button>
  <button>two</button>
</div>

一
二

然后，在第一个

按钮

元素之前以及两个

按钮

元素之间存在匿名文本节点。通常只有后者才重要，它的行为就像一个正常的单词空间

---

更新：正如下面的评论和Alohci的回答所指出的，这一古老的（HTML4.01）原则大部分没有在浏览器中实现，大部分已经在HTML5中删除。因此，在大多数情况下，元素之间的换行符会创建一个文本节点，其中包含一个换行字符，该字符被视为等同于一个空格。

实际情况有些复杂。分为两部分

解析的作用

渲染的作用

在解析文本（与标记相反）时，解析实际上只删除很少的空白。它将在无效的

元素上运行，但仅此而已

Jukka引用了HTML4.01的一节，其中提到“必须忽略紧跟在开始标记之后的换行符，就像紧跟在结束标记之前的换行符一样”，但这是一个非规范性附录，除了上面提到的三个元素外，浏览器不遵循它

这可以用Jukka的例子来演示，在没有空格的换行符上。请注意树显示中按钮elmeents周围的

#text:

节点，如果删除换行符，则不再显示“#text:`节点

我们还可以看到，使用规范中的第一个示例并没有应用该规则。通过添加

display:pre

可以清楚地看出，断线并没有完全被忽略，但呈现两个示例相同只是默认空白处理的一个属性，即

white space:normal

---

这就引出了CSS规范中的相关规范。这涵盖了应用于每个空白设置值的文本字符的系统规则。

实际情况有些复杂。分为两部分

解析的作用

渲染的作用

在解析文本（与标记相反）时，解析实际上只删除很少的空白。它将在无效的

<
<div>
  <button>one</button>
  <button>two</button>
</div>