边距何时在空的内联元素上呈现？ [英] When do margins render on empty inline elements?
问题描述
什么时候在空的内联元素，根据规范和浏览器中渲染边距？以下代码已在chrome（webkit）中测试。
When do margins render on empty inline elements, according to the specs, and in browsers? The following code has been tested in chrome (webkit).
此代码不显示任何保证金：
This code displays no margin:
<p>Example <span style="margin:2em"> </span>Example</p>
此代码的作用是：
<p>Example <span style="margin:2em"></span>Example</p>
我理解，在第一个示例中，白色空间已折叠，但这应该等同于第二个例子？所以为什么&何时？
I understand that in the first example, the white space is collapsed, but that should make it equivalent to the second example? So why & when?
推荐答案
规范说空格应该被折叠，即使一个内联元素在空格之后开始并以空格开头（即，开始标签出现在空格的中间，如在你的第一个 span 元素）：
The spec says that whitespace should be collapsed even if an inline element begins after whitespace and starts with whitespace (i.e. the opening tag appears in the middle of whitespace as in your first span element):
任何空格（U + 0020）如果该空间的'white-space'设置为'normal'，'nowrap'或'pre-line' - 被删除。
any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.
对于你的第一个 span 元素，这将导致一个空元素。 空的内联元素仍应生成空框，但是零宽度，因为没有内容，并且边框应该仍然生效，因为框总是呈现：
For your first span element, this should result in an empty element. An empty inline element should still generate an empty box, albeit with zero width since there is nothing inside, and margins should still take effect since the box is always rendered:
空的内联元素生成空的内联框，但这些框仍然有边距，填充，边框和行高，因此影响这些计算就像内容的元素。
Empty inline elements generate empty inline boxes, but these boxes still have margins, padding, borders and a line height, and thus influence these calculations just like elements with content.
根据Chrome的Web Inspector，它似乎无法为 span 元素生成框，因为它会将元素中的空格折叠到之前的空格中。当源中的 span 元素为空时，它会正确生成带有边距的空框。所有其他浏览器在执行空格折叠后绘制一个空框没有任何麻烦，规范没有说明删除一个非匿名框，如果它被空白折叠的过程，所以我会说这是
According to Chrome's Web Inspector, it looks like it's failing to generate the box for the span element entirely as it collapses the space in the element into the space that comes just before it. When the span element is empty in the source, it generates an empty box with margins correctly. All other browsers have no trouble drawing an empty box after they perform whitespace collapsing, and the spec doesn't say anything about deleting a non-anonymous box if it was made empty by the process of whitespace collapsing, so I would say that this is a Chrome bug.
如评论中所述，此问题也会影响Chrome的最新版本，它使用Blink。 Blink是WebKit的一个分支，所以很奇怪，大多数困扰WebKit的CSS2.1 bug都没有在Blink中修复。
As mentioned in the comments, this issue affects the latest versions of Chrome as well, which use Blink. Blink is a fork of WebKit after all, so it's not surprising to see that most of the CSS2.1 bugs plaguing WebKit haven't been fixed in Blink yet.
这篇关于边距何时在空的内联元素上呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
