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

首先，我了解导致内联块元素之间出现水平空格的字母间距问题。这不是另外一个问题。
相反，我有一个小高度的全宽度内联块元素，我希望它的下一个邻居直接从下面靠近它，但是它们之间总是有一个看起来与行高度差不多的空间。
我试过所有我能想到的垂直对齐、字体大小和行高的组合。有没有人有创造性的方法去除空白？

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

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

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

最佳答案

为什么会这样？
在本例中，父元素的font-size会影响bodydiv，基本上将它们视为文本。
我们怎样才能使元素inline-block不留空白？
在本例中，父元素inline-block被赋予body，然后将子元素赋予font-size: 0：

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>

我们应该这样做吗？
我想不出这个的实际用途，请使用font-size。

关于html - 内联块元素之间的垂直间距小于字体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30769251/