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

我有三个并排水平堆叠的div，这些div被设置为display:inline block。然而，我注意到，即使使用某种CSS重置，它们也会在彼此之间产生4倍的小距离？为什么会发生这种情况？有没有一种方法可以从全局上避免这种情况发生，或者我只需要将div移到左侧-4px？

假设这是因为每个结束标记后都有换行符。这些在HTML中作为空格处理。尝试移除它们。以下是一些演示：

-带空格

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

---

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

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

#容器{字体大小：0；}
#container>div{font size:1rem；display:inline block；}

我已经在这篇文章中证明了这一点

---

更多信息，请看这里。

去掉上一个div结尾和下一个div开头之间的新行 例如，更换以下部件：

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

分区项目1
分区项目2

与

分区项目1
分区项目2

使用

float:left

或

display:inlineblock

都可以工作。请参考工作示例链接。

您的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>

希望有帮助

编辑：

---

另请参见相关的SO问题：

请展示一个使用您自己的HTML+CSS的示例。这与使用float和inline block的问题相同，就像使用两块石头杀死一只鸟一样。使用float，您将无法使用简单的文本对齐完美地将元素居中，这让我发疯！！谢谢你的解释。CSS对我来说并不经常有任何意义：）谢谢你在多年不理解它之后解释这一点

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

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

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

<div>
Div1
</div>

<div>
Div2
</div>

<div>
Div3
</div>

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

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