html - 带和不带文本的内联块 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 添加一些文本或 a 。当然，添加vertical-align: top也可以解决此问题。

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

score 9 · Accepted Answer

默认情况下，内联块框是垂直对齐的，这样内联块框的基线与渲染它的行框的基线对齐。

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

在这种情况下，一个后备规则开始起作用，并且 inline-block 框的底部被放置在其 line box 的基线上。

1 回答 1