带有和没有文本的内联块div没有垂直对齐

Question

我有两个div并排。两者都具有相同的大小和display: inline-block。两者之间的唯一区别是，第一个有一些文本，第二个是空白。

HTML：

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

CSS：

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

第一个div低于第二个div。

我知道所有可能的修复，例如向第二个div添加一些文本或 。当然，添加vertical-align: top也可以解决这个问题。

我想知道的是，有人可以解释一下，为什么空白div的对齐方式与带有一些文本的div不同？

JSFiddle

Answer 1

默认情况下，内联块框垂直对齐，使得内联块框的基线与呈现它的线框的基线对齐。

带有一行文本的内联块框的基线是该行的基线。更一般地说，内联块的基线是它包含的最后一行文本的基线。但这意味着没有包含任何文本的内联块没有基线。

在这种情况下，后退规则会启动，并且内嵌块框的底部会放置在其行框的基线上。