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

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

- Alex

Answer 1

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

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

请查看这个链接

或者按照以下方式编写标记：

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

- sandeep

---

设置字体大小为0并不是正确的解决方法……因为这些盒子内的任何内容都会变成字体大小为0。 - Abhidev

你可以根据需要设置内部内容的字体大小，参见 http://jsfiddle.net/y7L7q/10/。 - sandeep

可以的，但你必须多次指定同一个属性。 - Abhidev

很好，你提供了两个解决方案，我只是想说如果这些div中有多个元素，那么可能会引起更多问题，因为你需要为每个元素指定字体大小。 支持@wheresrhys的评论。 - Abhidev

有趣的解决方案。我喜欢你的纯CSS方法 - 当无法编辑HTML时，拥有一些可以做的事情总是很有用的 - 而且word-spacing不像一个hacky的解决方案（尽管我仍然觉得font-size: 0是）。 - wheresrhys

Answer 2

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

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

- wheresrhys

---

我偏爱在代码块之间添加注释。我倾向于在我的 HTML/CSS 代码中添加 <!-- no whitespace here -->，以便未来的 Web 开发人员阅读时可以更好地理解。 - FelipeAls

Answer 3

这是一个与`display: inline-block`有关的常见问题。您有几种解决方案，删除换行符（或将其注释掉：http://jsfiddle.net/eaqfk/），设置`font-size: 0`，设置`margin-right: -4px`。

更多详细信息请参考这个问题：CSS: Spacing issue with dropdown。

- TimPetricola

Answer 4

使用float:left代替display:inline-block，以消除不必要的空间。看看这个。

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

另外请注意，我认为font-size:0不是正确的方法，因为它会破坏那些div内部的内容。

- Abhidev