`display:inline-block` 元素上的奇怪边距

我有 6 个DIVs with display:inline-block在一行中。但它们之间有一个奇怪的空白，我怎样才能摆脱它呢？它们应该排成一排放入容器中。

Fiddle: http://jsfiddle.net/y7L7q/ 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;。像这样：

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

检查这个http://jsfiddle.net/y7L7q/1/ http://jsfiddle.net/y7L7q/1/

OR

像这样写下你的标记：

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

检查这个http://jsfiddle.net/y7L7q/2/ http://jsfiddle.net/y7L7q/2/