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 .

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>