Question

我有三个div水平并排堆叠在一起，这些div设置为显示：inline-block。但是，我注意到即使使用某种CSS重置，它们之间也会产生4px的小距离？为什么会这样？有没有办法全局摆脱这种情况发生，或者我只需要将div移到左边-4px？

Answer 1

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

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

#container { font-size: 0; }

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

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

请查看此article了解详情。

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可行。请参阅工作示例链接here。

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问题：How can I stop the new line from adding a space between my list items in HTML

当显示内联块并水平堆叠时，如何摆脱div之间的空间？

5 个答案: