点击第三个按钮时前两个按钮出现跳动的原因是什么？

核心原因：垂直对齐基线变化触发布局重排 #

Chrome中，按钮默认属于inline-block元素，其默认vertical-align属性值为baseline（基线对齐）。当第三个按钮内部元素切换时，自身基线位置发生改变，同一行的前两个按钮为维持基线对齐被迫调整垂直位置，从而出现“跳动”现象。

具体过程拆解 #

1. 初始状态：第三个按钮内的<span id="title">Push</span>是行内元素，它的文字基线决定了整个按钮的基线位置，前两个按钮的文字基线与它对齐，三个按钮垂直位置保持一致。
2. 点击后状态：clickListener函数隐藏#title，将#loader设为inline-block。#loader设置了margin:15px auto，作为inline-block元素，它的基线是自身下边缘，这直接改变了第三个按钮的基线位置。
3. 布局重排触发：同一行的前两个按钮会自动调整垂直位置，匹配第三个按钮新的基线，视觉上就表现为跳动。

解决办法 #

给所有按钮设置固定的垂直对齐方式，锁定基线基准，避免内部元素变化影响整体对齐：

button {
    height: 3rem;
    padding: 0 1rem;
    margin-right: 20px;
    vertical-align: middle; /* 固定垂直对齐方式 */
}

也可以调整#loader的样式，让它的基线位置与原#title一致，但设置按钮的vertical-align是更通用、可靠的方案。

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