Question

我在一行中有DIV个display:inline-block个<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/

HTML：

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

CSS：

{{1}}

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/

Answer 3

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

一切都在这个问题上：CSS: Spacing issue with dropdown

Answer 4

使用float：left来删除不需要的空格，而不是显示：inline-block。看看这个。

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

另请注意，font-size：0在我看来不是正确的方法，因为它会弄乱这些div中的内容。

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

4 个答案: