为何设置不同inline-block元素的vertical-align会引发不同对齐变化？

一、inline-block的基线规则 #

• 包含文本的inline-block元素，基线是内部最后一行文本的底线（比如例子里的gjpiy div，基线就是文本"gjpiy"的底部）。
• 无文本内容的inline-block元素，基线是自身的底部边缘（例子里的first和second div，基线就是它们的底边）。

二、默认对齐逻辑：baseline对齐 #

同一行内的inline/inline-block元素，默认使用vertical-align: baseline——所有元素的基线都会对齐到父级行框的基线，而父级行框的基线由行内的文本元素（此处为gjpiy div）的基线决定。

在你的第一个默认例子中：

• gjpiy的基线是文本底线；
• first（高100px）的基线是自身底边，因此它的底边会和gjpiy的文本底线对齐；
• second（高30px）的基线也是自身底边，同样和gjpiy的文本底线对齐；
  最终呈现为first和second的底边都与文本底线齐平，first因高度更高向上延伸出更多空间。

三、为什么修改大元素的vertical-align会让所有元素移动？ #

当给最高的first div设置vertical-align: top时：

1. vertical-align: top的作用是让元素顶端对齐到父级行框的顶端；
2. 父级行框的顶端由行内所有元素的最顶端决定——原来行框顶端就是first的顶端（因为它最高），现在first的顶端与行框顶端对齐，直接重新定义了行框的整体范围：行框顶端为first的顶端，底端仍为first的底端（它依然是最高元素）；
3. gjpiy和second默认保持vertical-align: baseline，它们的基线需要对齐到父级行框的基线（即gjpiy的文本底线）。但此时行框范围以first的高度为准，为了满足基线对齐规则，gjpiy会被向上推，second也会跟着移动，最终三个元素都呈现上移效果。

四、为什么修改小元素的vertical-align只有它自己移动？ #

当给second div设置vertical-align: top时：

1. second的顶端会对齐到父级行框的顶端（也就是first的顶端，因为first是最高元素，行框顶端由它决定）；
2. first和gjpiy依然保持默认的vertical-align: baseline对齐，它们的位置不受second影响——因为second不是行内最高元素，修改它的对齐方式不会改变父级行框的整体范围（行框的顶端和底端仍由first决定）；
3. 只有second自身调整位置对齐到行框顶端，因此看起来只有它上移。

核心总结 #

• 父级行框的范围由行内最高/最大的元素决定，这就是你感知到“较大元素有影响力”的本质；
• 修改最高元素的vertical-align会重新定义行框的对齐基准，进而影响所有依赖该基准的元素；
• 修改较小元素的vertical-align仅调整它自身在现有行框中的位置，不会改变行框的整体基准，因此其他元素位置不变。

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