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

Question

首先,我知道字母间距问题导致内联块元素之间的水平空格.这不是另一个问题.

相反,我有一个高宽度的内嵌块元素,我希望它的下一个邻居直接从下面邻接它,但它们之间总是有一个看起来与行高有关的空间.

我已经尝试了我能想到的垂直对齐,字体大小和线高的每种组合.任何人都有创造性的方法去除那个空白？

.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-blockdiv的,基本上是对待他们喜欢的文字.

我们如何保持元素inline-block没有空白？

给出了父元素,body在这个例子中,font-size: 0您将给子元素a 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.