Perché c'è spazio bianco dopo il mio blocco in linea?

Question

sto usando lo stile galleggiante per rimuovere gli spazi bianchi e voglio centrarlo, ma un altro spazio bianco appare dopo il mio div#bar

Questo è il mio html:

<div id="foo"> 
    <div id="bar"> 
     <div class="divo divo1">test1</div> 
     <div class="divo divo2">test2</div> 
     <div class="divo divo3">test3</div> 
     <div class="divo divo4">test4</div> 
    </div> 
</div> 

e css:

#foo { 
    width: 100%; 
    background: #999; 
    text-align: center; 
} 
#bar { 
    display: inline-block; 
} 
.divo { 
    display: block; 
    float: left; 
} 

http://jsfiddle.net/Kodam/ay3ywtqa/

Nota: non desidero utilizzare gli stili margine negativo o dimensione carattere 0.

Answer 1

Poiché #bar è un elemento inline, ha spazio riservato per elementi di testo discensore (ad esempio j, y, g). Si potrebbe galleggiare che di sinistra, ma che sarebbe crollato, così mi consiglia di impostare l'allineamento verticale verso l'alto:

#bar { 
    display: inline-block; 
    vertical-align:top; 
} 

jsFiddle example

Answer 2

provare questo:

#foo { 
     width: 100%; 
     background: #999; 
     font-size:0; 
     text-align: center; 
    } 
    #bar { 
     display: inline-block; 
     font-size:13px; 
    } 

set genitore font-size a 0, quindi impostare il tipo di carattere, dimensione necessaria per i bambini.

jsFiddle: http://jsfiddle.net/ay3ywtqa/3/