word-spacing仅对英文单词间空格生效，中文因无词边界而无效；中文需用letter-spacing控制字间距；line-height无单位值为font-size乘数，推荐全局使用；vertical-align与line-height共同影响行内元素垂直对齐。
word-spacing 只影响英文单词间空格，对中文无效
word-spacing 的作用对象是「单词之间的空白」，浏览器按 Unicode 词边界（如空格、连字符、标点）切分文本后，在相邻单词之间插入额外间距。中文没有单词分隔符，整段文字被当作一个“词”，所以设置 word-spacing: 20px 对纯中文段落毫无反应。
常见误用场景：
- 想让中文标题字与字之间拉开距离，却写了
word-spacing - 中英文混排时只调
word-spacing，结果英文单词撑开、中文不动，视觉错乱
正确做法：中文需用 letter-spacing；中英文混排建议统一用 letter-spacing 或结合 word-spacing 微调英文部分。
line-height 不是行高像素值，而是行距计算比例
line-height 设为无单位数值（如 1.6）时，它是一个乘数，作用于当前元素的 font-size，最终行高 = font-size × line-height。设为带单位值（如 24px）则直接生效，但会破坏继承逻辑——子元素若未重设 line-height，将沿用这个固定像素值，可能在缩放或换字体时导致行距塌陷或溢出。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
- 全局基础行高用无单位值：
line-height: 1.5 - 需要精确控制某段文字（如按钮内文）可用
line-height: 24px，但务必同步确认子元素是否需重置 - 避免写
line-height: 0来“消除行距”——这会让多行文本上下重叠，line-height: 1才是紧凑但可读的下限
letter-spacing 是中文“字间距”的唯一可靠方案
要控制中文字符、数字、标点之间的间距，必须用 letter-spacing。它对每个字符（包括汉字、英文字母、数字）之后插入指定间距，不区分语言。
注意细节：
- 负值会让字紧贴甚至重叠：
letter-spacing: -1px可用于微调标题紧凑感，但别超过-2px，否则可读性下降 - 响应式中慎用固定像素值，优先用
em或rem单位，例如letter-spacing: 0.05em随字号等比缩放 - 不要在长段落正文里设
letter-spacing，易造成阅读疲劳；仅用于标题、标签、短文本
h1 {
font-size: 2rem;
letter-spacing: 0.08em; /* 字间距随字号自适应 */
}
<p>.tag {
font-size: 0.875rem;
letter-spacing: 1px; /<em> 小字号下用 px 更稳 </em>/
}line-height 和 vertical-align 共同决定行内元素垂直对齐
当行内有图片、图标或 inline-block 元素时，line-height 不仅控制文本行高，还参与该行的“行框（line box）”高度计算。而 vertical-align 决定这些元素在行框内的对齐基准线。
典型问题：
- 图标和文字看起来“偏高”或“下沉”，其实是
vertical-align默认为baseline，而图标底边常低于文字基线 - 设了
line-height: 2后，图标仍不对齐，是因为没同步调整vertical-align
解决方式：
- 统一设
vertical-align: middle或vertical-align: -0.125em（更精准匹配字体度量） - 避免给行内元素单独设
height或line-height，干扰整体行框计算 - 调试时可在开发者工具中勾选「Show layout shifts」观察行框实际范围
真正难的是在响应式设计里兼顾不同字号下的 letter-spacing 和 line-height 行为——它们不是独立变量，而是和 font-size、字体度量、甚至系统渲染引擎强耦合的。一次调好，不等于所有设备都一致。
