当使用inline-block并且水平堆叠div时，如何消除它们之间的空格？

Question

我有三个水平堆叠在一起的 div，这些 div 被设置为 display:inline-block。但是，我注意到即使使用某种 CSS 重置，它们之间仍会产生一个小的 4px 距离？这是为什么呢？有没有办法全局消除这种情况，或者我只需要将这些 div 左移 4px？

- Matt

---

请展示一个使用您自己的HTML + CSS的示例。 - Diodeus - James MacFarlane

这是与此问题相同的问题。我的答案可能会帮助您解决问题。 - jamesplease

Answer 1

这是因为您的浏览器会将DIV呈现为内联元素，就像单词一样，它们之间用空格隔开。

空格的宽度由字体大小确定，因此一个简单的技巧是将包含元素的字体大小设置为0，然后在内联div中重置字体大小。

#container { font-size: 0; }

#container > div {font-size: 1rem; display: inline-block; }

我已经在这个Fiddle中进行了演示。

查看此文章以获取更多信息。

- thomaux

---

太好了，这让我快疯了！！谢谢你的解释。CSS很少让我感到有意义 :) - El Ronnoco

感谢您解释这个问题，多年来我一直不理解。 - stkmedia

Answer 2

假设这是因为每个关闭标签后的换行字符。在HTML中，这些被处理为空格。尝试移除它们。以下是几个演示：

http://jsfiddle.net/eeRFC/ - 包含空格

<div>test</div>
<div>test</div>
<div>test</div>

http://jsfiddle.net/eeRFC/1/ - 没有空格

<div>test
</div><div>test
</div><div>test
</div>

还有常见的CSS：

div {
  border:solid 1px black;
  display:inline-block;
}

- Viktor S.

Answer 3

去掉前一个div结束和下一个div开始之间的换行符，例如将以下内容替换为：

<div id="div1">
 Div Item 1
</div>
<div id="div2">
 Div Item 2
</div>

使用

<div id="div1">
 Div Item 1
</div><div id="div2">
 Div Item 2
</div>

- Learner

Answer 4

使用float:left或display:inline-block都可以。请参考这里的工作示例链接：这里。

- dopeddude

---

使用浮动和inline-block 就像用两块石头打死一只鸟。 - thomaux

而且，使用浮点数时，您将无法通过简单的 text-align 居中元素。 - Fred K

Answer 5

你的HTML代码中很可能在div之间加入了换行符，对吧？如果在div之间有任何分隔符，那么浏览器将在它们之间显示空格。

以下示例代码在div之间有空格：

<style>
* {
    margin: 0;
    border: 1px solid black;
}

div {
    display: inline-block;
}
</style>

<div>
Div1
</div>

<div>
Div2
</div>

<div>
Div3
</div>

你可以使用两种方法来去除div之间的空格。一种方法是去掉div元素之间的分隔符，像这样：

<div>
Div1
</div><div>
Div2
</div><div>
Div3
</div>

或者将您的div设置为浮动元素：

...
div {
    display: inline-block;
    float: left;
}
...

希望能帮到你！ 编辑：
另请参见相关的SO问题：如何阻止换行符在HTML中在列表项之间添加空格。

- Mike Hill