Empty div vs div with text having inline-block property

Question

Want to know the reason for this behavior.

CSS

div {
   display: inline-block;
   margin-right: 2px;
   width: 20px;
   background-color         


        

Answer 1

I guess this can be explained by the text alignment, independently from divs.

Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.

Empty div
Some text
    

    

    

    

continuing here

Div with text
Some text 
    
20
    
40
    
60
    
80
continuing here

...

div {
       display: inline-block;
       margin-right: 2px;
       width: 20px;
       background-color: red;
    }

Fiddle

In the above fiddle, you can see that the text line is the "guideline".

Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.

I'm sorry, maybe not very clear but I hope you understand my view.