“display:inline block”元素上的奇怪边距

Question

我在一行中有6个DIV和display:inline-block。但他们之间有一个奇怪的空白，我该怎么摆脱呢？它们应该放在一行的容器里。

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

Answer 1

写入font-size:0;。像这样：

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

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

或

这样写你的标记：

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

Answer 2

因为它们被设置为内联块，这意味着它们之间的空白被视为内联空白，因此被呈现为内联空白。您可以通过将所有div放在html中的一行来解决此问题，或者将空白区域包装在注释中：

<div class="box"></div><!--
--><div class="box"></div>

Answer 3

这是display: inline-block的常见问题。您有一些解决方案，请删除新行（或对其进行注释：http://jsfiddle.net/eaqfk/)设置font-size: 0，设置margin-right: -4px。

一切都在这个问题上：CSS：下拉的间距问题

Answer 4

使用float:left来移除不需要的空间，而不是display:inline块。看看这个。

http://jsfiddle.net/y7L7q/9/

还要注意，在我看来，font-size:0不是正确的方法，因为它会把div中的内容弄得一团糟。