line-height推荐用无单位数值（如1.5），子元素继承系数并按自身字号计算，响应式安全；百分比（如150%）和带单位值（如24px）均先转为绝对长度再继承，易致嵌套行高失真或缩放失效。
line-height 控制行间距：数值、百分比和单位的区别
行间距不是简单地给 line-height 设个像素值就完事。它实际定义的是「行框盒子」的最小高度，浏览器会基于字体大小（font-size）计算基线位置，再按设定值撑开垂直空间。
-
line-height: 1.5是最推荐的写法——它是无单位数值，相对于当前元素的font-size计算，继承安全，响应式友好 -
line-height: 150%看似等价，但百分比值在子元素中会先计算为绝对长度再继承，容易导致嵌套时行高失真 -
line-height: 24px在固定字号下看似精准，但一旦父级用rem或媒体查询缩放字体，行高就卡死不动，视觉节奏断裂
letter-spacing 调整字间距：负值要谨慎
letter-spacing 直接作用于字符之间的空白，但它会影响整个文本流的宽度计算，尤其在中文场景下容易引发布局意外。
- 中文默认不需要额外字间距，设
letter-spacing: 0反而是保险做法（某些旧版 Safari 对中文字体默认加了微小正向间距） -
letter-spacing: -0.02em可用于收紧标题排版，但超过-0.05em就可能让相邻汉字笔画粘连，尤其在小字号或低分辨率屏上 - 避免对含空格或换行符的段落整体设负值——空格也会被压缩，导致词间拥挤，阅读断句困难
中文排版还要注意 font-family 和 text-rendering
单纯调 line-height 和 letter-spacing 不足以保证中文显示一致，字体栈和渲染策略同样关键。
- 确保
font-family包含系统中文字体，例如：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif；否则 fallback 到英文默认字体，行高和字宽表现全乱 - 在 Chrome/Firefox 中可加
text-rendering: optimizeLegibility提升连字与字距微调，但 Safari 下该属性对中文字体无效，且可能轻微拖慢渲染 - 若页面有大量小号中文（如 12px），建议禁用
font-smooth或设-webkit-font-smoothing: antialiased，防止系统自动加粗导致字间距视觉变窄
遇到行高“塌陷”或“溢出”先查 display 和 vertical-align
有时候改了 line-height 却没效果，或者行框莫名高出预期，大概率是内联元素或表格单元格的隐式行为在捣鬼。
- 图片、
input、button等替换元素默认是display: inline，它们会参与行框构建，并受vertical-align: baseline影响——此时line-height实际撑开的是整行，不是文字本身 - 解决方案：给这些元素加
vertical-align: middle或改为display: inline-block，再单独控制其line-height: normal - 表格单元格（
td）中文字行高异常？检查是否设置了height——当height小于内容所需行高时，浏览器会优先满足height，导致文字被裁切或强制压缩
实际项目里最容易被忽略的，是把 line-height 当成“文字上下留白”来用，却没意识到它本质是行框高度控制器；还有就是对中文字体不设 font-family fallback，结果在 Linux 或旧 Windows 上回退到 Courier New，整段文字行高和字宽彻底失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
