html - Strange margin on `display:inline-block`-elements -

i have 6 divs display:inline-block in 1 line. have strange white space between each other, how can rid of that? should fit in container in 1 line.

fiddle: http://jsfiddle.net/y7l7q/

html:

<div id="container">     <div class="box"></div>     <div class="box"></div>     <div class="box"></div>     <div class="box"></div>     <div class="box"></div>     <div class="box"></div> </div> 

css:

#container{     width:300px;     border:1px solid black; } .box{     display:inline-block;     height:50px;     width:50px;     background-color:black;     margin:0;     padding:0; } 

write font-size:0;. this:

#container{     width:300px;     border:1px solid black;     font-size:0; } 

check http://jsfiddle.net/y7l7q/1/

or

write mark this:

<div id="container">     <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> </div> 

check http://jsfiddle.net/y7l7q/2/