何时在空内联元素上渲染边距？

Question

何时根据规范和浏览器在空内联元素上渲染边距？以下代码已在chrome(webkit)中测试过.

此代码不显示保证金:

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

这段代码确实:

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

我知道在第一个例子中,空白区域已折叠,但这应该与第二个示例相同吗？为什么&何时？

小提琴

Answer 1

规范说,即使内联元素在空格后开始并以空格开头(即开始标记出现在第一个元素中的空格中间),空格也应该折叠span:

跟随另一个空间(U + 0020)的任何空间(U + 0020) - 即使是内联之前的空格,如果该空间也将"白色空间"设置为"正常","现在"或"预先行" - 是除去.

对于您的第一个span元素,这应该导致一个空元素.一个空的内联元素仍然应该生成一个空框,虽然宽度为零,因为内部没有任何内容,并且边距应该仍然生效,因为框始终呈现:

空内联元素生成空的内联框,但这些框仍然具有边距,填充,边框和线高,因此影响这些计算就像具有内容的元素一样.

根据Chrome的Web Inspector,看起来它没有完全生成span元素的框,因为它将元素中的空间折叠到它之前的空间中.当span元素在源中为空时,它会生成一个带有边距的空框.所有其他浏览器在执行空格折叠后绘制一个空框都没有问题,并且规范没有说明删除非匿名框如果它被空白崩溃的过程变为空,那么我会说这是Chrome错误.

正如评论中所提到的,此问题也会影响最新版本的Chrome,它们使用Blink.毕竟Blink是WebKit的一个分支,所以看到困扰WebKit的大多数CSS2.1错误还没有在Blink中得到修复也就不足为奇了.