html - 显示内联块并水平堆叠时如何消除div之间的空间？

Question

我有三个并排水平堆叠的 div，这些 div 设置为 display: inline-block。但是，我注意到即使使用某种 CSS 重置，它们之间也会产生 4px 的小距离？为什么会出现这种情况？有没有办法在全球范围内摆脱这种情况，还是我只需要将 div 移到左侧 -4px？

Answer 1

这是因为您的浏览器将呈现 DIV 的内联内容，并且与单词一样，它们由空格分隔。

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

#container { font-size: 0; }

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

我已经在这个Fiddle中证明了这一点。

看看这篇文章了解更多信息。

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

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>

Answer 4

使用其中一个float:left或display:inline-block将工作。请参阅此处的工作示例链接。

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>

或者让你的 divs 浮动元素：

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

希望有帮助！

编辑：
另请参阅相关的 SO 问题：如何阻止新行在 HTML 中的列表项之间添加空格