Why is there a space after my inline block?

Question

I use float style to remove spaces and I want to center it, but after my div#bar

another blank space appears

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 do not want to use negative margin styles or font size 0.

Answer 1

Since #bar is an inline element, it has the space reserved for descender text elements (e.g. j, y, g). You can swim what remains, but it will crash it, so I recommend setting the vertical alignment at the top:

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

JsFiddle example

Answer 2

try the following:

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

set the parent font size to 0, then set the desired font size for children.

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