在这种情况下，您的div元素已从block关卡元素更改为inline元素。inline元素的典型特征是它们尊重标记中的空白。这就解释了为什么 元素之间会产生间隙
。
（例）
有一些解决方案可用于解决此问题。
方法1-从标记中删除空格
示例1-将空白注释掉：（
<div>text</div><!----><div>text</div><!----><div>text</div><!----><div>text</div><!----><div>text</div>
示例2-删除换行符：（
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
示例3-在下一行关闭标签的一部分
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
示例4-在下一行关闭整个标签：（
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
方法2-重置 font-size
由于inline元素之间的空格是由决定的font- size，因此您可以简单地将重置font-size为0，从而删除
元素之间的空格。
只需font-size: 0在父元素上设置，然后font- size为子元素声明一个新元素。如本文所示，此方法有效
#parent { font-size: 0;}#child { font-size: 16px;}这种方法效果很好，因为它不需要更改标记。但是，如果font-size使用em单位声明了子元素，则无法使用。因此，我建议从标记中删除空格，或者选择浮动元素，从而避免元素产生的空间inline。
方法3-将父元素设置为 display: flex在某些情况下，您还可以display将父元素的设置为flex。
这样可以有效地删除受支持的浏览器中元素之间的空格。不要忘记添加适当的供应商前缀以获取其他支持。
.parent { display: flex;}.parent > div { display: inline-block; padding: 1em; border: 2px solid #f00;}.parent { display: flex;}.parent > div { display: inline-block; padding: 1em; border: 2px solid #f00;}<div > <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div></div>侧面注意事项：使用负边距消除元素之间的间隔是非常不可靠的inline。如果还有其他更好的解决方案，请不要使用负边距。
