Css 具有内联块的元素中的不同边距

我正在将div从

float:left

切换到

inline block

，不知道为什么有些div会移位，好像它们有一些看不见的边框或其他东西

下面是带有

float:left

这里有

内联块

---

作为解决此问题的一个可能选项，请将父级的

字体大小设置为
0

section { font-size: 0; }

您可以恢复子元素上的字体：

div { font-size: 16px; }

演示：

有关解释和其他可能的解决方案，请参见我的回答：



有一个自动添加内联元素的空间，该空间也应用于
内联块

如果标记中的元素之间没有空格（空格或回车），则内联块元素将在没有空格的情况下呈现

要做到这一点并保持最佳格式，最简单的方法是在
元素之间使用注释标记，如下所示：


最后有一个

您是否链接了正确的示例？看起来你可能忘了在第二个版本中更新你的小提琴。我认为这与此有关-你是对的！我已经更新了第二个。谢谢请参阅@Pangloss发布的链接，但也可以在这里找到一个链接。感谢这两个链接提供的信息！这是解决这个问题的一种方法。但我不认为这是最简单的方法。还有许多其他的方法同样简单和容易，但在格式方面没有牺牲更多是指，如果要在这些元素中的任何一个元素中呈现文本，这将成为一个障碍。但我明白你的意思。我喜欢使用
，因为如果使用相同的缩进设置格式，标记很容易理解，而且看起来几乎不会改变，因为大多数文本编辑器都会将注释灰显。我刚刚在上面链接的另一个问题中看到了您的另一个答案。我不知道在将父元素设置为0后，可以将子元素的
字体大小设置为正常。很酷。你的方式是最谨慎的。就像我说的，有几种选择。你和我的答案都有效地解决了这个问题。我只遇到了一个小问题，那就是最简单地调用comment标记方法。谢谢你的反馈。
section { font-size: 0; }

div { font-size: 16px; }

<section>
     <div></div><!--
  --><div></div><!--
  --><div></div><!--
  --><div></div>
</section>

section {
  display: table;
  word-spacing: -2em;
  width: 100%;
}

div {
  display: inline-block;
  word-spacing: normal;
}