line-height 设为无单位数值（如1.6）最安全，因其按当前 font-size 动态计算；单行垂直居中需 line-height = height 且无 padding/border；flex 中 line-height 不失效，而是被 align-items 覆盖；它作用于行框而非单个内联元素。
line-height 设为无单位数值（如 1.6）才是通用安全写法
固定像素值（如 line-height: 24px）在响应式或字体缩放时极易失控：根字号变小，行高却卡死在 24px，导致文字挤在一起；字号变大后又可能重叠。而 line-height: 1.6 是乘数，浏览器自动按当前 font-size 计算真实高度（14px × 1.6 = 22.4px），缩放、rem 切换、子元素字号变化时都稳。
中文正文建议从 line-height: 1.75 起步；现代无衬线字体（如思源黑体、HarmonyOS Sans）自带较大内置留白，1.6 可能已偏松，需打开 DevTools 加 border: 1px solid red 观察实际行框。
- 别用
line-height: 100%或line-height: 1em：它们会继承父级字体大小，嵌套深时容易错乱 -
normal浏览器默认值不可靠，不同字体下差异明显，务必显式设置 - 百分比（如
150%）语义等价于无单位值，但继承行为更隐晦，不推荐
单行文字在固定高容器中垂直居中：line-height = height 是唯一轻量解
这是 line-height 最经典也最易翻车的用法。它只在三个条件同时满足时才可靠：height 明确（非 auto）、内容单行、无干扰 padding/border。
典型写法：.btn { height: 40px; line-height: 40px; white-space: nowrap; }。此时浏览器把整行文本塞进一个刚好 40px 高的行框，并居中对齐——不是“撑开”，而是“填满并居中”。
- 若容器有
padding: 8px，内容区实际高是40px - 16px = 24px，那line-height就得设成24px，不是40px - 加了
display: flex后line-height会失效，因为 flex 的align-items优先级更高 - 文字超长自动换行？立刻崩：必须配
white-space: nowrap，必要时加overflow: hidden和text-overflow: ellipsis
line-height 在 flex/grid 容器里“不生效”其实是被对齐规则覆盖了
常见现象：给 p 设了 line-height: 1.8，放进 display: flex 的父容器后文字还是贴顶。这不是 line-height 失效，而是 flex 默认 align-items: stretch 把子项拉满高度，掩盖了行高效果。
解决逻辑分两层：
- 单行文本要居中 → 改父容器：
align-items: center，子元素删掉line-height也没关系 - 多行段落要控制每行间距 →
line-height依然有效，但整体容器高度由 flex 的flex-shrink、max-height或内容决定，需检查是否被意外截断 - 绝对不要在 flex 子项上硬调
line-height去“凑”垂直居中，那是本末倒置
给 span/a 等内联元素设 line-height 为什么没反应
line-height 不作用于内联元素自身，它控制的是该元素所在「行框（line box）」的整体高度。给一个 span 设 line-height: 2，不会让它单独变高，只会抬高它那一整行的上下边界。
所以你看到的现象是：单个 span 没撑开，但整行文字的行距变大了。如果这行只有它一个内联元素，且父容器是块级（如 p），那效果就等同于给父元素设了 line-height。
- 按钮内文字居中常用此技巧：
button { height: 40px; line-height: 40px; }—— button 是块级，line-height控制其内部行框 - 想让
span在行内垂直对齐其他内容？该用vertical-align，不是line-height - 行框高度还受字体本身的 ascent/descent 影响，
line-height只是总高，无法微调基线位置
真正容易被忽略的点是：line-height 的作用对象永远是“行”，不是“字”也不是“块”。所有看似失效的场景，基本都是误判了它的作用域——要么以为它该控制单个内联元素，要么以为它该对抗 flex 的对齐逻辑，要么忘了单行前提。盯住「行框」这个概念，多数困惑自然解开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
