Vertical space between inline-block elements smaller than font - html

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.

Answer 2

Float them?
.blue{background:blue;}
.red{background:red;}
.blue,.red{
width: 100%;
height:5px;
display: inline-block;
float:left;
}
<div class="blue"></div>
<div class="red"></div>

Answer 3

if you want to use 100% width, then why not use display: block instead of inline-block.
Note:
If you want to use float, its a good practice to clear it after.
while using float, display property is not required as Float takes care of it.
.blue{background:blue;}
.red{background:red;}
.blue,.red{
height:5px;
display: block;
}
<div class="blue"></div>
<div class="red"></div>