带和不带文本的内联块 div 未垂直对齐答案

【问题标题】：inline-block div with and without text not vertically aligned带和不带文本的内联块 div 未垂直对齐
【发布时间】：2022-04-25 17:57:42
【问题描述】：

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

HTML：

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

CSS：

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

第一个 div 低于第二个。

我知道所有可能的修复方法，例如在第二个 div 中添加一些文本或 &nbsp;。当然，添加 vertical-align: top 也可以解决此问题。

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

在这种情况下，一个后备规则开始起作用，并且内联块框的底部放置在其行框的基线上。

【讨论】：