12

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>

And this code does:

<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?

Fiddle

4
  • 1
    This might be more likely a Webkit bug than actual spec. Firefox, Opera (pre-webkit) and IE all render both examples the same way.
    – Ming
    Nov 19, 2013 at 5:03
  • 5
    Note that Chrome (since v28) is now on the Blink layout engine, not WebKit. Blink is a fork of part of WebKit, but the two have diverged noticeably at this point. This may, however, be a bug present in both layout engines, if it was present in WebKit before the fork.
    – ajp15243
    Nov 19, 2013 at 5:11
  • @ajp15243: Indeed it is present in both layout engines.
    – BoltClock
    Nov 19, 2013 at 5:16
  • 1
    Here is a fiddle: jsfiddle.net/hUYYv/1 . Note the second case there. Adding "white-space: pre-wrap" reduces it to similar as the other two cases. Nov 19, 2013 at 5:18

1 Answer 1

8

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):

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.

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.

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.