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

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

span标记默认为display:inline，但在代码中受white-space影响。

白色空间没有它自己的大小但它确实呈现