空的内联元素何时呈现边距？

Question

根据规范和浏览器，当空的行内元素呈现边距时是在什么情况下？以下代码已在Chrome（Webkit）中进行了测试。

这段代码不显示边距：

<p>Example <span style="margin:2em"> </span>Example</p>

而这段代码的作用是：

<p>Example <span style="margin:2em"></span>Example</p>

我知道在第一个例子中，空白被压缩了，但这应该使其等同于第二个例子吧？那么为什么会这样，以及何时会出现这种情况？

Fiddle

- Jeff

---

这可能更有可能是Webkit的错误，而不是实际规范。 Firefox，Opera（pre-webkit）和IE都以相同的方式呈现这两个示例。 - Ming

请注意，Chrome浏览器（自版本28起）现在使用的是Blink排版引擎，而不是WebKit。Blink是WebKit的一个分支，但两者已经明显分歧。然而，如果这个Bug在WebKit分支之前就存在，那么它可能同时存在于两种排版引擎中。 - ajp15243

@ajp15243：确实在两个布局引擎中都存在。 - BoltClock

这里有一个fiddle：http://jsfiddle.net/hUYYv/1/。请注意第二个案例。添加"white-space: pre-wrap"将其缩小到与其他两个案例类似。 - Chandranshu

Answer 1

该规范指出，即使行内元素以空格开始并在空格后出现（即打开标签在空格中间出现，如第一个元素），空格也应该被折叠：

删除跟在另一个空格（U+0020）后面的任何空格（U+0020），即使是行内元素前的空格，如果该空格的'white-space'设置为'normal'、'nowrap'或'pre-line'也删除它。

对于您的第一个元素，这应该导致一个空元素。一个空的行内元素仍然应该生成一个空框，尽管宽度为零，因为没有内容，且边距仍然会生效，因为框始终被呈现：

空的行内元素生成空的行内框，但这些框仍具有边距、填充、边框和行高，因此像带有内容的元素一样影响这些计算。

根据Chrome的Web Inspector显示，它似乎无法完整地为元素生成框，因为它会将元素中的空格折叠到紧挨着它的空格中。当元素在源代码中为空时，它会正确生成带有边距的空框。所有其他浏览器在执行空格折叠后，都没有问题地绘制出一个空框，并且规范中没有说明如果通过空格折叠过程使非匿名框变为空，则删除该框，因此我会说这是Chrome的一个错误。

如评论中所述，最新版本的Chrome也受到了影响，它使用了Blink。 Blink毕竟是WebKit的一个分支，所以不难看到大多数困扰WebKit的CSS2.1错误在Blink中尚未修复。

- BoltClock