Vertical space between inline-block elements smaller than font

Question

First, I know about the letter-spacing problem that causes horizontal spaces between inline-block elements. This is not another of those questions.

Instead, I have a full-width inline-block element with a small height, and I want its next neighbor to abut it directly from below, but there's always a space between them that looks to be about the line-height.

I've tried every combination of vertical-align, font-size, and line-height I can think of. Anyone have a creative way of removing that whitespace?

.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

Why is this happening?

The font-size of the parent element, in this case body, affects the inline-block divs, essentially treating them like text.

How can we keep the elements inline-block with no white space?

The parent element, body in this example, is given font-size: 0, you would then give the child elements 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>

Should we do this?

I can't think of a practical use of this, use display: block.