图标字体和文字差 2px 基线 vertical-align 该给多少

.icon {
  font-size: 16px;
  vertical-align: -0.125em;
}
.btn { display: inline-flex; align-items: center; gap: 4px; }

按钮里的图标比文字高出两个像素，一行文字加图标看着总是歪的，字号换大以后偏得更明显，截图放大到 200% 能看清底边没对齐。这类现象通常不是突然出现的，往前翻半天日志能看到苗头。

追下去是这么回事：图标字体本质是文字，字形按字体基线摆放，图标在设计时通常画得比字高，直接和文字并排就会顶上去。line-height 和 vertical-align 都按默认值走，偏移量没人补。

「图标基线偏移」确认了原因之后，改动尽量只碰那一处，顺手改的东西后面最容易出问题。同类问题如果隔一段时间又出现，多半是某个定时任务或重启流程把改动冲掉了。

处理上按这个顺序：先量图标和文字的底边 差多少补多少 别凭感觉写一个数；用 vertical-align 配合 em 单位微调 字号变化时偏移跟着缩放；图标单独包一层 inline-flex 让两者按中线对齐 字号再变也不会错位。

确认没问题再收工，按钮里图标底边和文字底边齐平，把字号从 14px 调到 20px 也不歪。