line-height仅在单行、inline或inline-block下可靠，换行、图标、字体差异等会导致失准；其原理是控制行框高度，图标按baseline对齐，增大line-height会改变图标与文字相对位置。
line-height 能调，但只在单行、display: inline 或 inline-block 场景下可靠；一旦有换行、图标尺寸不一、字体加载延迟，它就容易失准。
line-height 为什么能影响图标和文本对齐
浏览器把一行文字（包括内联图标）当作一个“行框”来渲染。line-height 决定了这个行框的高度，而图标作为 inline 元素，默认按基线（baseline）对齐——也就是文字底部那条线。当 line-height 增大，行框变高，图标和文字的相对位置会跟着浮动，看起来就像“被抬高”或“压低”了。
常见错误现象：
- 同一段 HTML，在 Chrome 看着刚好，在 Safari 里图标下沉 1–2px
- 改了
font-size后，原来用line-height: 1.4调好的位置全乱了 - 图标是 SVG，
viewBox原点不统一，vertical-align: middle+line-height组合失效
怎么用 line-height 微调对齐（实操要点）
核心思路：固定行高 → 控制图标高度 → 配合 vertical-align 锚定位置。不是盲目调 line-height，而是把它当成“标尺”来用。
- 父容器显式设置
line-height（推荐无单位值，如line-height: 1.3），避免继承混乱 - 图标本身设
height: 1em或height: 1.2em，让其高度随当前font-size缩放 - 用
vertical-align: -0.125em替代middle，数值更可控；调试时直接在 DevTools 里拖动像素值，再固化为em - 避免混用不同来源的图标（Font Awesome / 自绘 SVG / iconfont），它们 baseline 不一致，
line-height无法统一校准
什么时候 line-height 微调会失效
以下情况硬调 line-height 是徒劳的：
- 按钮里有
<svg></svg>+ 多行文字 →line-height对多行无效，且图标会被撑开错位 - 用了 Web Font，首屏加载时 fallback 字体导致基线跳变 →
line-height值瞬间失效 - 父容器
line-height: normal（尤其 IE11 下各引擎渲染差异极大）→ 行高不可预测 - 需要响应式缩放（比如
font-size从16px切到20px）→ 所有px偏移量全部作废
这时候直接切到 display: inline-flex + align-items: center，省掉所有微调成本。
line-height 和 vertical-align 的配合边界在哪
line-height 不是万能对齐工具，它只负责定义“行框高度”，真正决定图标上下位置的是 vertical-align 的锚点选择。关键区别：
-
vertical-align: middle对齐的是 x-height 中线（受字体 ascender/descender 影响），不是视觉中点 -
vertical-align: text-bottom锚定文字底边，图标底边与之对齐，最稳定 -
vertical-align: -0.125em是经验偏移值，但只在font-size一致的前提下有效
复杂点在于：中文基线比英文低，SVG 图标 viewBox 原点不统一，line-height 再精确也救不了这些底层不一致。真要稳，就得放弃纯 inline 方案，用 flex 接管对齐逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
