I am trying to space 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](http://jsfiddle.net/SLq6z/)

```
<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.