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

Question

我在一条线上有6 DIV秒display:inline-block.但是他们之间有一个奇怪的白色空间,我怎么能摆脱它呢？它们应该在容器中装入一行.

小提琴: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

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

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

Answer 2

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