vertical-align对齐的inline-block元素上方空白成因咨询

CSS样式：

.outer {
    display: block;
    background: lightblue;
    font-size: 50px;
}

.inner {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: red;
    vertical-align: middle;
}

HTML结构：

<div class="outer"><div class="inner"></div></div>

• 类名为.inner的红色方块上方出现了异常空白间距。

已知该现象和父元素设置的font-size: 50px有关，但.inner元素已经设置了vertical-align: middle属性，按照常规理解该属性应该让元素定位在行框中间位置，为什么仍然会出现上方空白？

这个空白是行内格式化上下文的默认渲染规则共同作用的结果，核心是对vertical-align: middle的对齐逻辑存在认知偏差，具体原理如下：

• 只要容器内存在inline/inline-block级别的元素，容器就会生成对应的行框（line box）承载这些行内元素。每个行框会默认生成一个宽度为0的匿名行内盒（俗称幽灵空白节点），这个节点和普通文字的渲染属性完全一致，会继承父元素的字号、行高，全程参与行内对齐，只是因为宽度为0肉眼不可见。
• W3C标准中vertical-align: middle的对齐规则从来不是「将元素放到行框的几何正中心」，它的真实规则是：将当前元素的垂直中点，与父元素基线上方1/2 x-height（即小写字母x的高度）的位置对齐。这个对齐参考点完全基于前述匿名行内盒的文字参数计算，和行框本身的几何中点没有直接关系。
• 当父元素设置font-size: 50px时，匿名行内盒的字号同样为50px，它本身就会占据对应字号的行高空间，同时对齐参考点的位置也会随50px字号对应上移。.inner对齐到这个参考点后，行框为了容纳匿名行内盒所需的字符顶部预留空间，自然会在红色方块上方留出你看到的空白。

如果需要消除这个空白，任选以下一种方案即可：

• 给父元素.outer设置font-size: 0，让匿名行内盒的尺寸变为0，不再额外占据布局空间
• 将.inner的vertical-align属性改为top或者bottom，让元素直接对齐行框的上下边缘，跳过基线相关的对齐逻辑
• 把.inner改为display: block，脱离行内格式化上下文，就不会触发行框、匿名节点的相关渲染逻辑

内容的提问来源于stack exchange，提问作者uAlexKaspar