Geek Answers Handbook

Strange distance between spans if the first span has the last character space

I noticed this problem caused by a typo of localization - at the end of the translation there was space left, which caused an unexpected effect. I reproduced it in the following script :

<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 bootstrap version of version 3.1.1.

Could you help me understand why a space with the last character space sticks to the next, but when the space is removed from the inner range, it returns to normal?

+5
source share
3 answers

HTML has whiter spaces ( \t , \n , etc.) are replaced by a space (exactly one space). In the first code, this space is inside the span , and it makes no sense to display another space after the span .

In the second case the space is displayed correctly after a span , because it is the first.

+4
source

Note that the width of the label increases when you enter a space for the last character.

+1
source

Yes, I see strange space, but I added inline-block to the label. Now you do not see this strange 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/

0
source

More articles:


All Articles