line-height 改变会破坏 baseline 对齐：因图标与文字按 baseline 对齐，line-height 影响行框高度及 baseline 位置，导致 Bootstrap Icons 的 vertical-align: -.125em（相对 line-height 计算）偏移；推荐用 inline-flex + align-items: center 替代 inline 布局。
line-height 改变会破坏 baseline 对齐基准
图标（尤其是 <i class="bi bi-x"> 这类字体图标）和文字默认是 inline 元素，渲染时按 baseline 对齐。而 line-height 不仅控制行间距，还直接参与「行框（line box）」高度的计算——这个高度决定了 baseline 的垂直位置。一旦你改了 line-height，哪怕只是设成 line-height: 1，浏览器就会重新计算 x-height 和 descender 区域，导致图标内置的 vertical-align: -.125em 失效或偏移 1–2px。
Bootstrap Icons 的 vertical-align 值是相对 line-height 的
Bootstrap Icons v1.10+ 在 CSS 中预设了 i.bi { vertical-align: -.125em; }，这个 -.125em 是相对于当前元素的 line-height 计算的，不是固定像素。所以当你把父容器 line-height 从默认的 normal（约 1.2）改成 1，那个 -.125em 实际偏移量就变小了，图标看起来就“浮高”了。
- 实测常见组合：
font-size: 1rem; line-height: 1;→ 图标偏高约 1.5px；line-height: 1.4;→ 偏移基本消失 - 若同时用了自定义字体（如 Noto Sans SC），其 ascender/descender 比系统字体更大，
line-height变动带来的影响会更明显 -
line-height设为无单位数值（如1.2）比设为px更安全，避免缩放时失准
用 flex 替代 inline 布局可彻底绕过这个问题
只要你不依赖 inline 流，line-height 就根本不会影响图标与文字的垂直关系。把图标和文字包进一个 <div class="icon-text">，然后加：
.icon-text {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
这样对齐逻辑就从「baseline + line-height」切换到「flex 容器 content box 中心」，不再受字体度量、line-height 或 SVG viewBox 原点干扰。即使你在全局重设了 line-height: 1.1，只要没给 .icon-text 内部子元素再设 line-height，就不会出问题。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点
很多人只改了外层容器的 line-height，却忘了 <i> 标签本身可能继承了其他样式（比如来自 .nav-link 的 line-height: 1.5），或者图标内部 <svg> 被 Bootstrap 自带的 i.bi svg { vertical-align: inherit; } 拉回 baseline。这种嵌套层级下的对齐，单靠调一个 line-height 或一个 vertical-align 几乎不可能稳定——必须明确控制作用域：要么统一用 flex，要么锁定所有相关元素的 line-height 和 vertical-align 值，并确保没有隐式继承干扰。
