Div spacing problem

I am trying to s开发者_C百科pace out DIVs. I have five DIVs that are 30px wide and want to put these into another DIV that is 150px wide. Sounds simple but I find the five DIVs don't fit.

5*30 = 150 (but it requires a 166px outer div for them to fit inline)

I have this fiddle

<div class="A">
    <div class="B" >a</div>
    <div class="B" >b</div>
    <div class="B" >c</div>
    <div class="B" >d</div>        
    <div class="B" >e</div>
    <div class="B" >f</div>
</div>

div.A { background-color: Red; width: 150px;}
div.B { display: inline-block; height: 20px; width: 30px;}

Is there something I am missing? I can't understand why the browsers space the way they do.

As you are turning the divs into inline elements, the other inline content will also come into play, i.e. the white space between the elements. You get a space between each div, which takes up a few pixels more.

If you remove the white space between the divs, there will be no spaces between them, and five elements fit in 150 pixels:

http://jsfiddle.net/SLq6z/1/

Can you replace display:inline-block with float:left without causing any other issues? it solves your current problem...

div.B { float:left; height: 20px; width: 30px;}

Use float:left property for both your classes A and B ;).