html - 在空间之间跨度元素不流入？

Question

为什么空<span>元素夹在 <span> 之间时不符合流程带空格的元素？

这是一个例子:

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span class="space"> </span><span class="empty"></span><span class="empty"></span><span class="empty"></span><span class="space"> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span>

上面，我们有一些<span>组成短语的元素。但是我在两个空格之间放置了一些空元素。结果使空元素脱离流。如果你使用调试工具，你会看到 span.empty元素不再流入，并被视为 0px，0px 宽。

在没有包装空间元素的情况下做同样的事情，空元素返回流入:

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span class="empty"></span><span class="empty"></span><span class="empty"></span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span>

谁能解释一下这是为什么？我使用的是 Chrome 45。

Answer 1

默认情况下，浏览器会将一系列空格折叠成一个空格。我相信这背后的主要原因是标记可以缩进以提高可维护性，而不会影响最终呈现的输出。

在这两个示例中，.empty span 不包含任何内容并设置为默认的 display: inline; 这意味着它们将不占用任何水平空间。这两个示例之间的区别在于它们周围的内容:

• 在第一个示例中，它们位于两个空间之间，因此坍塌不存在。如果 .empty span 包含一个空格，你会得到相同的结果
• 在您的第二个示例中，它们被字符包围，因此空白折叠不会生效

在几个不同的浏览器中进行测试，这似乎是 Chrome 决定显示折叠元素的方式。 Firefox 和 Opera 做事的方式不同，并以相同的方式处理两个示例中的 .empty span(根本不显示它们)。