Inline div block with and without text not vertically

Question

I have two div side by side. Both are the same size and display: inline-block . The only difference between the two is that the first has some text and the second is empty.

HTML:

 <div>1</div> <div></div> 

CSS

 div { display: inline-block; border: 1px solid black; width: 50px; height: 50px; } 

The first div is lower than the second.

I know all the possible corrections, for example, adding some text or   to the second div. Adding vertical-align: top also fixes this, of course.

What I want to know, can someone explain why an empty div has a different alignment than a div with some text in it?

Jsfiddle

Answer 1

Inline-blocks are by default vertically aligned so that the baseline of the inline-block is aligned with the baseline in the line field in which it is displayed.

The baseline of an inline block block with one line of text is the baseline of that line. More generally, the baseline of an inline block is the baseline of the last line of text that it contains. But this means that there is no baseline for an inline block that does not contain text.

In this situation, the return rule is returned, and the lower part of the block of the built-in block is placed in the baseline of its line.