line-height设为无单位数值（如1.5）最安全，是相对于当前字体大小的倍数，继承性好；设为带单位值（如20px或1.5em）易导致子元素行距僵化或计算失控；line-height:1存在截断风险，中文建议≥1.2，英文混合≥1.35；flex/table布局中需配合align-items、min-height等属性协同控制。
line-height设成数字和设成带单位的值，效果完全不同
设成纯数字（如 line-height: 1.5）是相对当前字体大小的倍数，会继承并参与后续计算；设成带单位的值（如 line-height: 24px 或 line-height: 1.5em）则可能被固定死，子元素无法按自身字号缩放。实际排版中，用无单位数值最安全，尤其在响应式或字体大小动态变化的场景里。
常见错误现象：父元素设了 line-height: 20px，子元素字体变大后行距卡死不动，文字挤在一起甚至重叠。
- 推荐始终优先用无单位数值，比如
line-height: 1.4、line-height: 1.6 - 避免用
px，除非你明确需要绝对控制且确定字号不会变 -
em看似相对，但会叠加祖先的line-height计算，容易失控，慎用
line-height为1时，文字可能上下“贴边”甚至被截断
很多人以为 line-height: 1 就是“刚好够用”，其实它只保证行高等于字体的 font-size，而英文大小写字母、中文全角字符、上标下标等实际占用空间往往超出这个范围。浏览器渲染时，若行高不够，就会裁掉部分升部（ascender）或降部（descender），导致字母发虚、标点错位、行间粘连。
使用场景：按钮内文、卡片标题、紧凑列表——这些地方容易贪小设 line-height: 1，结果在不同字体或不同系统上表现不一。
- 中文排版建议最低用
line-height: 1.2，更稳妥是line-height: 1.3～line-height: 1.4 - 英文混合内容（如带 icon 的按钮文字）至少保留
line-height: 1.35 - 用 Chrome DevTools 的“Layout”面板打开“Show layer borders”，能直观看到每行实际占用高度是否被压缩
flex容器里文字行距异常，其实是align-items干扰了line-height
当文字包裹在 display: flex 容器中（比如一个居中按钮），即使设置了 line-height，也可能发现垂直对齐“偏高”或“压底”。这不是 line-height 失效，而是 align-items: center（默认值）让整行文字作为 flex item 按基线（baseline）对齐，而 line-height 控制的是行框（line box）高度，二者逻辑层面不直接对应。
性能/兼容性影响：这个问题在 Safari 和旧版 Chrome 中更明显，尤其是字体加载完成前后有跳动。
- 解决方法不是调
line-height，而是给文字外层加align-self: center或改用margin: auto - 更彻底的做法：把文字包一层
span，设display: inline-flex+align-items: center，避开行框与 flex item 的对齐冲突 - 如果只是单行文本，
height+line-height相等仍是最轻量方案，但必须确保容器overflow: hidden防止撑出
line-height在table-cell里表现特殊，不能只靠继承
表格单元格（display: table-cell）有自己的一套行高计算规则：它会把 line-height 当作“最小行高”，但最终高度由单元格内容、vertical-align 和同行其他单元格共同决定。即使你给 td 设了 line-height: 2，若里面只有一行短文字，又没设 height 或 min-height，它依然可能塌缩。
常见错误现象：后台管理系统表格中，操作列按钮文字看起来“悬浮”在单元格中间，但鼠标 hover 区域却偏上或偏下——本质是 line-height 没真正撑开单元格高度。
- 给
td显式加min-height（比如min-height: 40px），再配line-height才可靠 - 避免在
table-cell上用vertical-align: middle+line-height组合来居中，优先用padding控制内边距 - 现代项目尽量用
display: grid或flex替代 table 布局，绕过这套复杂逻辑
line-height 看似简单，但它的计算依赖字体度量、渲染引擎、父级 display 类型，甚至字体加载时机。最常被忽略的，是把它当成“视觉行高”去调，而忘了它本质是“行框高度”的最小约束——真要精确控制垂直节奏，得配合 font metrics、padding 和容器 display 模式一起看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
