帶有和沒有文本的內聯塊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？

Answer 1

默認情況下，內聯塊框垂直對齊，使得內聯塊框的基線與呈現它的線框的基線對齊。

具有一行文本的內聯塊框的基線是該行的基線。 更一般地說，內聯塊的基線是它包含的最后一行文本的基線。 但這意味着沒有包含任何文本的內聯塊沒有基線。

在這種情況下，回退規則將啟動，並且內聯塊框的底部將放置在其線框的基線上。