Display Rules for Whitespace for Elements inside Inline Spans

Question

I am having a weird issue where I tend to think that a space should exist, but browsers clobber it. At the very least, I cannot quite understand the underlying logic for the behavior of how spaces are handled in elements that live inside an display: inline-block;. For example:

<p>
Space in an inline: This will have no<span style="display: inline-block;" class="bold"> space in it.</span>
</p>
<p>
<span style="display: inline-block;">Space btw inlines: This will have a</span> <span style="display: inline-block;" class="bold"><span> space in it.</span></span>
</p>
<p>
Space in the span: This will have a<span> space in it.</span>
</p>

Produces the HTML display:

Space in an inline: This will have nospace in it.

Space btw inlines: This will have a space in it.

Space in the span: This will have a space in it.

Which is weird for a few reasons. First, in the first case, the space between no and space still exists. Copy and paste, and it will be in your text (see: http://jsfiddle.net/gdhgmj7g/2/). However, it won't be shown in the web page. Does anyone know the rules for how this is actually handled? Is this a bug or somehow intended behavior? Weirdest of all, the first case has a space in the span, you just can't see it unless you copy-paste the content. The second has a space between the inline spans, which then allows things to display reasonably. Likewise, in a normal paragraph (third case), things work as expected. This behavior occurs consistently for IE, Firefox, and Chrome, so I would assume some logic is behind it. But I have zero idea why it is.

Answer 1

An element that is display:inline-block is a inline-level, block container.

Like all block containers, it's made up of a vertical stack of line boxes. In your first case of the inline-block span, the stack is just one line box high.

The white-space rules apply to that line box. The rules state that:

As each line is laid out,

1. If a space (U+0020) at the beginning of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is removed.
2. All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.
3. If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.
4. If spaces (U+0020) or tabs (U+0009) at the end of a line have 'white-space' set to 'pre-wrap', UAs may visually collapse them.

So from rule 1 the space at the start of the span is "removed". Note that this is a layout behaviour. The space is still in the content, so when you copy and paste it the space is included.

In your second case, the space is between inline-block elements. It is neither at the start, nor end of the line, so it is not removed by the white-space layout rules.

In your third case, span elements are, by default, not block containers. They don't create a stack of line boxes, so the space is not at the start or end of a line box, and so it is not removed by the white-space layout rules.