那是因为inline（-block）元素之间有一个空格字符（一个换行符和一些制表符算作一个空格），可以通过这样注释该空格来解决：
<div ></div><!-- --><div ></div><!-- --><div ></div><!-- --><div ></div>
实际上，这不是错误，而是内联元素的正常行为。就像将图像放置在文本行旁边，或在输入元素旁边放置按钮一样。
有几种方法可以删除inline（-block）元素之间的空间：
- 最小化HTML
- 负边距
- 将空白注释掉
- 打破结束标记
- 将父级的字体大小设置为零，然后为子级重置
- 浮动内联项目
- 使用flexbox
