html - 内联 block 元素之间的垂直间距小于字体

Question

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

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

我已经尝试了所有我能想到的垂直对齐、字体大小和行高的组合。任何人都有删除该空白的创造性方法？

.blue{background:blue;}
.red{background:red;}

.blue,.red{
  width: 100%;
  height:5px;
  display: inline-block;
}

<div class="blue"></div>
<div class="red"></div>

Answer 1

为什么会这样？

父元素的font-size，在本例中为body，影响inline-block div，本质上将它们视为文本.

我们如何让元素 inline-block 没有空格？

本例中的父元素 body 被赋予 font-size: 0，然后您可以为子元素赋予 font-size:

body {
font-size: 0;
}
.blue{background:blue;}
.red{background:red;}

.blue,.red{
  width: 100%;
  height:5px;
  display: inline-block;
}

<div class="blue"></div>
<div class="red"></div>

我们应该这样做吗？

我想不出它的实际用途，使用 display: block。