css - Div spacing problem -


i trying space out divs. have 5 divs 30px wide , want put these div 150px wide. sounds simple find 5 divs don't fit.

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

i have 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 missing? can't understand why browsers space way do.

as turning divs inline elements, other inline content come play, i.e. white space between elements. space between each div, takes few pixels more.

if remove white space between divs, there no spaces between them, , 5 elements fit in 150 pixels:

http://jsfiddle.net/slq6z/1/


Comments

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

java - Output of Eclipse is rubbish -

jquery - Confused with JSON data and normal data in Django ajax request -