letter-spacing 是唯一能直接拉开汉字间距的 CSS 属性，它对每个字符一视同仁，无论中英文；word-spacing 仅作用于空格分隔的单词，对纯中文无效；二者均为继承属性，需注意单位选择（em 更响应式）、负值安全范围（≤-0.03em）及真机测试。
letter-spacing 是唯一能直接拉开汉字间距的 CSS 属性
它对每个字符（汉字、英文字母、数字、标点）一视同仁，不管有没有空格都生效。比如 <p>欢迎来到首页</p> 这种纯中文结构，设 letter-spacing: 2px 就会让“欢”和“迎”之间多出 2px 空隙。
常见踩坑点：
- 照搬英文经验，对小字号中文（如 14px）直接用
letter-spacing: -2px—— “口”“田”“目”类字极易笔画重叠 - 负值未配
line-height，导致上下行文字粘连；建议负值不超过-0.03em，且必须搭配line-height: 1.6以上 - 忘记继承性：父元素设了
letter-spacing，子元素里的英文（如按钮里的NEW）也会被拉宽，需用span { letter-spacing: normal; }单独重置
word-spacing 对纯中文基本无效，只认源码里的空格
浏览器把“词”定义为被原始空白符（空格、\t、\n）分隔的连续非空白字符。所以 <p>立即购买</p> 整段被当做一个词，word-spacing: 5px 完全没反应。
想让它生效，必须手动在 HTML 里加空格：
立即学习“前端免费学习笔记（深入）”；
Cn Password Generator
下载
安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
-
<p>立即 购买</p>→word-spacing才会在“即”和“购”之间插空隙 - 用
word-spacing调整英文段落时，注意它只影响单词间空格，不改变标点或换行行为 - 两端对齐（
text-align: justify）时，word-spacing可缓解“河流效应”，但优先级低于浏览器自动拉伸逻辑，效果有限
单位选 em 还是 px？看场景定
em 相对于当前字体大小，更适合响应式设计；px 固定像素，在字号固定、精度要求高的标题中更可控。
实操建议：
- 标题微调（如
h1）用em：例如letter-spacing: -0.03em，随字号缩放保持比例 - 小屏正文宽松排版可用
px：例如letter-spacing: 0.5px，避免em在极小字号下趋近于 0 -
word-spacing在英文导航中推荐用em，比如.nav-link { word-spacing: 0.1em; }，适应不同设备字体渲染差异
别忽略继承污染和浏览器默认行为
letter-spacing 和 word-spacing 都是继承属性，一旦在 body 或容器上设置，所有子文本都会受影响，包括 input 提示文字、button 标签、甚至 code 块里的符号。
容易被忽略的关键点：
- 编辑器（如 Dreamweaver）里看不到效果，必须在浏览器中实时调试
- 某些 WebFont 加载后会重绘字距，
letter-spacing可能短暂失效，需配合font-display: swap或 JS 监听load事件 - 移动端 Safari 对负
letter-spacing渲染更敏感，同一值在 iOS 和 Android 上视觉差异可能明显，务必真机测试
