31

示例 1

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

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

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

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

示例 2

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

在此之前没有空间b。

示例 3

a<b> bold</b> man

现在之前的空白bold 很重要

示例 4

a <b> bold</b> man

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

问题

当空白被剥离或折叠时，背后的确切规则是什么？

4

3 回答 3

16

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

  1. 解析是做什么的。
  2. 渲染的作用。

解析实际上在解析文本时删除了非常少的空白（与标记相反）。它将在和元素的开头以及无效元素上删除初始换行符<textarea><pre><listing>，但仅此而已。

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

这可以使用 Jukka 的示例在没有空格的换行符上进行演示。注意#text:树形显示中按钮 elmeents 周围的节点，如果删除换行符，“#text:”节点将不再出现。

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

这将我们带到了相关规范，即16.6.1 CSS 规范中的“空白”处理模型。这涵盖了应用于每个空白设置值的文本字符的系统规则。

于 2012-10-12T19:25:07.810 回答
7

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

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

<div>   a   b   </div>
<div> a b </div>
<div>a b</div>
于 2012-10-12T16:48:16.870 回答
7

“空白在 HTML 中什么时候重要？”这个问题的完整答案 会相当冗长和详细，并且需要讨论属性规范和具有特殊规则（如textarea. 但地址似乎是主要关注点：

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

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

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

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

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

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

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

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

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

于 2012-10-12T17:14:15.327 回答