Why is there white space after my inline-block? [duplicate]

Question

I'm using the float style to remove white spaces and I want to center it, but another white space appears after my div#bar

This is my 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>

and css:

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

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

Note: I don't want to use negative margin or font-size 0 styles.

Answer 1

Since #bar is an inline element, it has space reserved for descender text elements (e.g. j, y, g). You could float that left, but that would collapse it, so I'd recommend setting the vertical alignment to top:

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

jsFiddle example

Answer 2

try this :

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

set parent font-size to 0, then set the needed font-size to the children.

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