Q:

Display Rules for Whitespace for Elements inside Inline Spans

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.

A:

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,

If a space (U+0020) at the beginning of a line has 'white-space' set to
  'normal', 'nowrap', or 'pre-line', it is removed.
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.
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.
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. 

