div en bloque con y sin texto no alineado verticalmente

Tengo dos div s uno al lado del otro. Ambos tienen el mismo tamaño y display: inline-block . La única diferencia entre los dos es que el primero tiene texto y el segundo está en blanco.

HTML:

 
1

CSS:

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

El primer div es más bajo que el segundo.

Estoy al tanto de todas las soluciones posibles, como agregar un texto o un   a la segunda div. Añadiendo vertical-align: top corrige esto también, por supuesto.

Lo que quiero saber es si alguien puede explicar por qué un div en blanco tiene una alineación diferente a un div con algún texto en él.

JSFiddle

Los cuadros de bloque en línea están, por defecto, alineados verticalmente de modo que la línea base del cuadro de bloque en línea se alinea con la línea base del cuadro de línea en el que se representa.

La línea base de un cuadro de bloque en línea con una línea de texto es la línea base de esa línea. De manera más general, la línea base de un bloque en línea es la línea base de la última línea de texto que contiene. Pero eso significa que no hay una línea base para un bloque en línea que no contenga texto.

En tal situación, se aplica una regla de retroceso y la parte inferior de la casilla de bloque en línea se coloca en la línea base de su recuadro de línea.