在这种情况下，您的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 class="parent">

    <div>text</div>

    <div>text</div>

    <div>text</div>

    <div>text</div>

    <div>text</div>

</div>

边注：

使用负边距来删除inline元素之间的空间是非常不可靠的。如果有其他更优化的解决方案，请不要使用负边距。