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

我有两个

div

s并排。两者的大小和显示：内联块都相同。两者之间的唯一区别是，第一个有一些文本，第二个是空白

HTML:

1

CSS:

div{
显示：内联块；
边框：1px纯黑；
宽度：50px；
高度：50px；
}

第一个div低于第二个div

我知道所有可能的修复方法，比如在第二个div中添加一些文本或

。添加

垂直对齐：top

当然也可以修复这一问题

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

---

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

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

---

在这种情况下，将使用回退规则，并且内联块框的底部将放置在其行框的基线上。

如果添加两行文本，将看到基线对齐change@Huangism我添加了一条线，路线发生了变化。谢谢你的提示。这是一个很好的解释。你有指向一些文档的指针吗？Adrift的回答提供了一个到相关规范的链接。我已经研究过了，但还没有掌握它。看来我必须考虑一下。链接的最后一段是这里最重要的一段。@bernie-