Question

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

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

Answer 1

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/