inline-block 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。當然，添加vertical-align: top也會修復此問題。

我想知道的是，有人能解釋一下，爲什麼一個空白的div與其中有一些文本的div有不同的對齊方式？

JSFiddle

Answer 1

直列塊盒，默認情況下垂直地對準，使得內聯塊箱的基線對齊到它被渲染的線框的基線。

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

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