Html 小于字体的内联块元素之间的垂直间距

首先，我知道字母间距问题，它导致内联块元素之间出现水平间距。这不是另一个问题

相反，我有一个全宽的内联块元素，高度很小，我希望它的下一个邻居直接从下面与它相邻，但是它们之间总是有一个看起来大约是线高度的空间

我尝试了我能想到的垂直对齐、字体大小和线条高度的每一种组合。有人有创造性的方法来删除空白吗

.blue{背景：blue；}
.red{背景：red；}
.蓝色，.红色{
宽度：100%；
高度：5px；
显示：内联块；
}

浮动它们

.blue{背景：blue；}
.red{背景：red；}
.蓝色，.红色{
宽度：100%；
高度：5px；
显示：内联块；
浮动：左；
}

---

如果要使用100%宽度，那么为什么不使用

显示：块

而不是内联块

注: 如果您想使用float，最好在之后清除它。 使用float时，不需要display属性，因为float会处理它

.blue{背景：blue；}
.red{背景：red；}
.蓝色，.红色{
高度：5px；
显示：块；
}

为什么会发生这种情况？ 父元素的

字体大小

，在本例中是

主体

，影响

内联块

div，本质上将其视为文本

我们如何使元素

内联块
没有空格？
在本例中，父元素
body
被指定为
font-size:0
，然后您将为子元素指定
font-size
：


正文{
字号：0；
}
.blue{背景：蓝色；}
.red{背景：red；}
.蓝色，.红色{
宽度：100%；
高度：5px；
显示：内联块；
}

我用block/flex/table回答并删除了它，但他想用inline block:）使用
inline block
的一个原因是您不必清除修复。太糟糕了，它带来了新的头痛。哇！几个小时后在网上搜索。最后，我发现了虚假的垂直间距背后的迷雾，即使是在没有文本的HR标记中。