<分区>
我有三个并排水平堆叠的 div，这些 div 设置为显示:inline-block。但是，我注意到即使使用某种 CSS 重置，它们之间也会产生 4px 的小距离？为什么会发生这种情况？有没有办法在全局范围内避免这种情况发生，或者我只需要将 div 向左移动 -4 像素？
<分区>
我有三个并排水平堆叠的 div，这些 div 设置为显示:inline-block。但是，我注意到即使使用某种 CSS 重置，它们之间也会产生 4px 的小距离？为什么会发生这种情况？有没有办法在全局范围内避免这种情况发生，或者我只需要将 div 向左移动 -4 像素？
最佳答案
这是因为您的浏览器将呈现内联 DIV，并且与单词一样，它们由空格分隔。
空格的宽度由字体大小决定，因此一个简单的技巧是将包含元素的字体大小设置为 0，然后在内联 div 中重置字体大小。
#container { font-size: 0; }
#container > div {font-size: 1rem; display: inline-block; }
我已经在 Fiddle 中展示了这一点.
看看这个article了解更多信息。
关于html - 显示内联 block 和水平堆叠时如何摆脱div之间的空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14241696/