line-height 失效主因是计算值与 height 不一致、white-space 换行、box-sizing 误解、flex/grid 忽略、inline 元素混排及字体度量差异。
line-height 设了但文字偏上/偏下，先看 computed styles 里真值
DevTools 的 Computed 面板里，line-height 和 height 数值必须完全一致——不是你写的值一样就行，而是最终计算结果（比如继承的 font-size: 0 会让行框塌陷为 0，line-height: 2 就等于 0px）。常见干扰项：font-size 被父级重置、rem 单位在根元素缩放后失准、em 在嵌套中层层放大。
white-space: nowrap 漏了，空格或回车就悄悄换行
哪怕模板字符串里有个换行符、JS 插入的文本带了个 \n、或者中文标点后多敲了一个空格，都会让 white-space: normal（默认）触发换行。单行失效，line-height 就只管第一行，第二行从顶部堆叠。
- 用 DevTools 的 Elements 面板 hover 文本，看是否被截断或出现多余空白行
- 强制加
white-space: nowrap，并检查是否被更高级选择器覆盖 - 服务端渲染或 CMS 输出的文案，需提前 trim + replace(/\s+/g, ' ')
padding/border 没进内容区，line-height 算错了高度
line-height 对齐的是内容区（content box），不是整个容器。如果用了默认 box-sizing: content-box，又写了 height: 40px; padding: 6px;，那内容区只剩 28px，line-height: 40px 就撑不满。
- 必须显式写
box-sizing: border-box - 算
line-height值时，用height - padding-top - padding-bottom - border-top-width - border-bottom-width - 按钮类元素常带 UA 默认
border，记得重置border: 0或显式声明
用了 flex/grid 或 vertical-align，line-height 直接被忽略
只要父容器是 display: flex 或 display: grid，line-height 对子元素的垂直对齐完全无效——它只对 inline-level 内容起作用。同理，给按钮或其子 span 加了 vertical-align: top，会强行把基线拉高，和 line-height 的默认行为冲突。
- 检查父级 display 类型，
display: inline-block是安全边界，flex/grid必须切方案 - 按钮内混了
svg、img或icon-font，它们默认vertical-align: baseline，会拖垮整行 - 移动端 Safari 还会偷偷给
button注入vertical-align: baseline，得手动写vertical-align: middle
真正难调的不是数值，是字体度量本身：不同系统字体的 ascent/descent 比例不同，PingFang SC 和 Microsoft YaHei 在相同 line-height 下基线位置能差 3px；而 Safari 渲染中文字体时，还可能拿英文度量去算，导致固定值在真机上永远偏上 2–4px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
