Strana strana tra le span se la prima span ha l'ultimo spazio dei caratteri

Question

Ho notato questo problema causato dalla tipizzazione della localizzazione - c'era uno spazio lasciato alla fine della traduzione, che ha causato un effetto inaspettato. Ho riprodusse in the following fiddle: classe

<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> 

L'etichetta è tratto dal Twitter di bootstrap versione 3.1.1.

Potresti per favore aiutarmi a capire perché l'intervallo con lo spazio di un ultimo carattere si attacca al prossimo, ma quando lo spazio rimosso dall'interno è tornato alla normalità?

Answer 1

In HTML più caratteri di spazio bianco (\t, \n, , ecc.) Vengono sostituiti da uno spazio (esattamente uno spazio). Nel primo codice questo spazio è all'interno di span e non vi è alcun motivo per eseguire il rendering di un altro spazio dopo span.

Nel secondo caso, lo spazio viene visualizzato correttamente dopo span, perché è il primo.

Answer 2

Si noti che la larghezza dell'etichetta aumenta quando si introduce lo spazio vuoto per l'ultimo carattere.

Answer 3

Sì, vedo uno spazio strano, ma ho aggiunto inline-block all'etichetta. Ora non vedi quello strano spazio.

.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/