Dlaczego jest pusta przestrzeń po moim bloku śródliniowym?

Question

używam styl pływaka usunięcie spacji i chcę to centrum miasta, ale kolejna biała przestrzeń pojawia się po moim div#bar

To jest mój 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> 

i CSS:

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

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

Uwaga: Nie chcę używać ujemnego marginesu ani stylów rozmiaru czcionki 0.

Answer 1

Ponieważ #bar jest elementem rolki, ma przestrzeń przeznaczoną dla elementów do opuszczania tekstu (na przykład j, r, g). Można pływać, który pozostawił, ale że go zwinąć, więc polecam ustawienie pionowe wyrównanie do góry:

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

jsFiddle example

Answer 2

spróbować tego:

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

zestaw nadrzędny rozmiar czcionki do 0, a następnie ustawić rozmiar czcionki potrzebne do dzieci.

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