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

Add

vertical-align: bottom;

to your CSS. Hope it works as you want.