Weird spacing between spans if first span has last character space

Question

I noticed this issue caused by localisation typo - there was a space left in the end of the translation, which caused an unexpected effect. I've reproduced it in the following fiddle:

<style>
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  background-color: #d9534f;
  text-transform: uppercase;
}
</style>
<div>
    <p>Label with last character space</p>
    <span class="label">Label </span>
    <span>some text</span>
</div>
<div>
    <p>Label without space</p>
    <span class="label">Label</span>
    <span>some text</span>
</div>

The label class is taken from the twitter bootstrap version 3.1.1.

Could you please help me to understand why span with a last character space sticks to the next one, but when space removed from inside span it is back to normal?

Answer 1

In HTML more white-space characters (\t, \n, , etc.) are replaced by a space (exactly one space). In the first code this space is inside span and there is no reason to render another one space after span.

In the second case, space is rendered correctly after span, because is the first.