在Chrome的列的随机左侧找到意外的边框

Question

我在里面创建了一个包含24列的行。我没有在细胞之间放置沟槽和边界，因此每个柱子彼此堆叠在一起。但是，在Chrome浏览器中，我发现了一件奇怪的事情。列的随机左侧有边框。 Chrome：

Firefox：

有人能告诉我这是什么情况吗？感谢

其他信息：

• 列有display:inline-block，margin-right:-4px，position:relative和vertical-align:top

• 行的宽度为100％

Answer 1

对元素使用inline-block时，由于HTML标记之间的空格作为换行符而标记为空格，因此会添加额外的空格。

此空白区域由其父容器的字体决定。 设置margin-right: -4px是不合适的，因为它可能是3x或5px，具体取决于使用的字体类型。

Here是font-size如何影响元素之间空间的示例。

对抗这些空间的更优雅的解决方案是浮动元素而不使用内联块，或者你可以使用flexbox。