不同字号的inline-block子div垂直对齐机制及非顶端对齐原因咨询

现有一个父div包含两个设置为inline-block的子div，二者字体大小不同，高度差异明显。请问浏览器依据什么规则确定左侧子div的垂直位置？为何它们并非从顶端开始对齐？

代码示例 #

<div>
    <h4>Got Some Ideas for us?</h4>
    <div style="display: inline-block; width: 300px;background-color: rgb(80, 133, 130);font-size: 16px;">
        <span>AAA</span>
        
    </div>
    <div style="display: inline-block;width: 300px;background-color: rgb(154, 16, 99);font-size: 88px;">
        
        <span>BBB</span>
    </div>
</div>

效果截图 #

浏览器对inline-block元素的垂直位置遵循基线对齐规则，这是内联元素默认的对齐逻辑：

• 基线（baseline）是文本排版的基准线，比如小写字母"x"的底部就是典型的基线位置。
• 当多个inline-block元素处于同一行时，浏览器会强制将它们的基线对齐到同一水平线上。

回到你的场景：

• 右侧子div的字体大小为88px，它的基线由内部大字号文本"BBB"决定，位置更靠下。
• 左侧子div的字体大小为16px，它的基线由"AAA"的底部决定。为了和右侧的基线对齐，左侧div会被向下偏移，最终导致两者顶端无法对齐。

如果需要让它们顶端对齐，只需给两个inline-block元素添加vertical-align: top样式即可，示例代码如下：

<div>
    <h4>Got Some Ideas for us?</h4>
    <div style="display: inline-block; width: 300px;background-color: rgb(80, 133, 130);font-size: 16px; vertical-align: top;">
        <span>AAA</span>
    </div>
    <div style="display: inline-block;width: 300px;background-color: rgb(154, 16, 99);font-size: 88px; vertical-align: top;">
        <span>BBB</span>
    </div>
</div>

内容的提问来源于Stack Exchange，提问作者Robin Sun