Trying to organize DIVs can be tricky. I have five DIVs that are each 30px wide and I want to place them inside another DIV that is 150px wide. However, it seems like the five DIVs do not fit as expected.
Even though 5 * 30 = 150, in reality it requires a 166px outer div for them to all fit inline.
You can view my code on 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;}
I'm puzzled by the spacing behavior of browsers. Is there something crucial that I am overlooking?