最简解法是给父容器设 display: flex + align-items: center；图标用 <svg> 并设 width/height 为 1em，避免固定像素值；tooltip 应与 label 同级而非嵌套，统一用 flex 对齐。
label 和
这是因为 label 默认是 inline 元素，而 <svg> 作为替换元素，默认按基线（baseline）对齐，其底部会预留 descender 空间（比如字母 g、y 的下延部分），即使图标本身没内容，浏览器也保留这部分行内布局空间。
常见错误写法：label .icon { vertical-align: middle; } —— 这个声明只对 inline 或 inline-block 元素生效，但若 .icon 是 <svg> 且未显式设 display，它可能被当作 inline 替换元素处理，vertical-align 行为仍受 line-height 和字体度量干扰，结果不稳定。
- 最简解法：给包含
label和图标的父容器加display: flex+align-items: center - 确保
<svg>不额外设vertical-align，也不包裹在<span>或<div>里（避免多一层基线计算） - 如果必须用
vertical-align，优先试text-bottom或bottom，比middle更可靠 -
line-height: 1在图标父级上设置，能直接砍掉行高带来的额外高度
label 内嵌图标后文字偏高或下沉
典型场景是 <label><svg class="icon"></svg>用户名</label>，文字看起来“浮”在图标上方。这不是图标位置问题，而是 <svg> 默认尺寸（如 24×24）和当前 font-size 不匹配，导致视觉重心错位。
解决关键不是调 margin，而是统一尺寸基准：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
<svg>设width: 1em和height: 1em，让它随父级文字大小缩放 - 确保
label的font-size显式声明（别依赖继承），例如font-size: 0.875rem - 避免给
<svg>设固定像素宽高（如16px），否则在响应式字号变化时必然脱节 - 如果图标仍偏高，加
vertical-align: -0.125em微调——这个值来自多数图标库的默认偏移，实测有效
label 与右侧 tooltip 图标（?）不对齐
这种组合常见于表单字段旁加帮助图标，比如 <label>邮箱地址<span class="tooltip-trigger">?</span></label>。问题往往出在 ? 是纯文本，而 label 的 line-height 拉高了整个行框，导致问号“沉底”。
推荐做法是剥离语义干扰：
- 把 tooltip 触发器从
label内移出，改为兄弟节点：<label>邮箱地址</label><button type="button" class="tooltip-trigger">?</button> - 用
display: flex包裹 label + tooltip，设align-items: center - 给
.tooltip-trigger设line-height: 1和font-size: inherit，避免字体度量差异 - 禁用
vertical-align—— 它在这里既不可控，又容易被父级 line-height 覆盖
移动端 Safari 下 label 和图标轻微错位
iOS Safari 对 inline 替换元素的 baseline 渲染有细微差异，尤其在 font-size 小于 16px 时，图标常下沉 1–2px。这不是 bug，是字体度量实现差异。
绕过方式不是 hack，而是放弃基线对齐逻辑：
- 强制父容器
display: flex，哪怕只有一处错位也值得 - 图标用
<svg>，不用字体图标（如<i class="bi bi-info"></i>），后者受字体加载、fallback 影响更大 - 如果必须用字体图标，补一句
font-feature-settings: "tnum";抑制数字比例变化，减少 baseline 波动 - 测试时不要只看 Chrome，真机连 Safari 开发者工具调试，
transform: translateY(-1px)是最后手段，仅用于兜底
