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

Question

example 1

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

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

在第一个 div 中，两个按钮之间没有空格，在第二个 div 中，有。

现在让我们考虑另一个例子：

example 2

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

b之前没有空格。

示例 3

a<b> bold</b> man

现在bold之前的空格很重要

示例 4

a <b> bold</b> man

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

问题

剥离或折叠空白的确切规则是什么？

Answer 1

现实有些复杂。有两个部分

1. 解析的作用。
2. 渲染的作用。

解析实际上在解析文本时删除了非常少的空白（与标记相反）。它将remove an initial line feed character at the start of <textarea> and <pre> elements 和无效的<listing> 元素上，但仅此而已。

Jukka 引用 HTML 4.01 部分 B.3.1 Line breaks 说“必须忽略紧跟在开始标记之后的换行符，就像紧接在结束标记之前的换行符一样”，但这是在非规范性附录和浏览器中除了上面提到的三个要素外，不要遵循它。

这可以使用 Jukka 的示例 here 进行演示，该示例使用无空格的换行符。注意树形显示中按钮elmeents 周围的#text: 节点，如果删除换行符，'#text:` 节点将不再出现。

通过使用规范here 中的第一个示例，我们还可以看到没有应用该规则。通过添加display:pre，很明显换行符并没有被完全忽略，而是将两个示例呈现相同只是默认空白处理的属性white-space:normal

这将我们带到相关规范，即 CSS 规范中的 16.6.1 The 'white-space' processing model。这涵盖了应用于每个空白设置值的文本字符的系统规则。

Answer 2

对“空白在 HTML 中什么时候重要？”这个问题的完整答案会相当长和详细，需要讨论属性规范和元素之间的空格等特殊规则，如textarea。但地址似乎是主要关注点：

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

几乎没有固定的渲染规则，但浏览器通常会忽略元素文本内容中的前导和尾随空格。

如果内联渲染的元素之间存在空格（例如默认为button 元素），它通常充当相当于一个空格的分隔符。

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

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

将被视为不存在换行符。但是当使用空格时，如

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

那么在第一个 button 元素之前和两个 button 元素之间会有匿名文本节点。通常只有后者很重要，它就像一个正常的单词空间。

更新：正如下面的评论和 Alohci 的回答所指出的，这个旧的 (HTML 4.01) 原则大部分没有在浏览器中实现，并且大部分在 HTML5 中被删除。所以在大多数情况下，元素之间的换行会创建一个文本节点，其中包含一个换行符，它被视为等同于一个空格。

Answer 3

HTML 将连续空格折叠成单个空格，但不会消除它。换行符是空格，因此是空格。

这不仅仅是前导/尾随 - 元素中的连续空白也被呈现为单个空白。这些将呈现相同：

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