Twitter Bootstrap Question posted in

Twitter bootstrap – Weird spacing between spans if first span has last character space

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?

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Notice that the width of the label is increased when you have introduced the blank space for last character.

    Login or Signup to reply.
  3. 0

    Yes, I see weird space, but I have added inline-block to the label. Now you don’t see that weird space . 

    .label {
  display: inline-block;
  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;
}

    http://jsfiddle.net/c8w6ex37/3/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search