letter-spacing 和 word-spacing 是唯二能通过纯 html/css 控制文本间距的标准方式；浏览器默认合并连续空白符，故无法靠空格实现精确间距；letter-spacing 对中英文字符均生效但视觉效果不同，word-spacing 仅对空格分隔的“词”有效，中文无空格分词故基本无效。
letter-spacing 和 word-spacing 是唯二能通过纯 HTML/CSS 控制文本“间距”的标准方式——HTML 标签本身不提供任何间距控制能力，所有所谓“HTML 方式”最终都得靠 CSS 属性落地。
为什么不能直接用 或多个空格解决？
浏览器默认会合并连续空白符（空格、换行、制表符），所以敲 5 个空格和敲 1 个空格效果一样； 虽然能强制保留一个不可断行空格，但它是语义性内容（即“这里有一个空格”），不是样式控制。滥用会导致：
- 复制粘贴时带出多余空格，破坏数据干净度
- 屏幕阅读器会逐字读出每个
- 响应式缩放时，空格宽度不随字体变化，易错位
- 无法统一管理：改一处要改几十处
letter-spacing 该设多少？中文和英文有区别吗？
它对所有字符一视同仁（汉字、英文字母、数字、标点），但视觉反馈不同：
- 中文：设
letter-spacing: 2px能明显拉开字距，适合标题；设负值如-0.5px可微调紧凑感，但-1px在 14px 字号下就可能粘连 - 英文：同样值下拉伸更明显，因为字母本身窄；但单词内部字母间距被拉大后，可能被误读（如 “kerning” 变成 “k e r n i n g”）
- 慎用全局设置：
body { letter-spacing: 1px }会让数字12345显得断开，表单里的<input type="number">输入框也可能渲染异常 - 单位推荐
px或em；避免%（它不按字体大小缩放）
word-spacing 对中文基本无效，别白费劲
它的作用对象是“以空格分隔的词”，而中文段落里没有空格分词机制。给一段纯中文加 word-spacing: 10px，浏览器找不到“词边界”，基本无反应。但它会对以下部分起效：
- 中英文混排中的英文单词：比如「下载 PDF 文件」，
P和D之间不会变，但PDF和「文件」之间的空格会被撑开 - 数字序列：「订单号：123456」中冒号后的空格会被拉宽，但 123456 内部不变
- 用空格人为分隔的中文：如「登 录」（中间加了空格），这时
word-spacing才会把「登」和「录」撑开——但这属于 hack，语义错误且维护成本高
真正需要“多空格”场景，用 <pre class="brush:php;toolbar:false;"></pre> 还是 CSS？
如果目标是保留原始空格格式（如代码、诗歌、地址），优先用 <pre class="brush:php;toolbar:false;"></pre> 标签，它天然保留空格与换行，且语义正确。但注意：
-
<pre class="brush:php;toolbar:false;"></pre>默认用等宽字体，若需匹配页面字体，必须显式重写：pre { font-family: inherit; } - 它不解决“在普通段落中插入可控空格”的需求；想让某个
<p></p>里某两个词之间比默认宽一点，还是得用letter-spacing包裹局部文本，或加span配margin - 不要为了间距滥用
<br>：它只换行，不控制间隔；想调换行后距离，应给<br>加类再设margin-bottom，而不是动line-height
最常被忽略的一点：所有这些属性都继承，letter-spacing 设在 <p></p> 上，里面的 <strong></strong>、<em></em>、图标字体（如 <i class="icon-user"></i>）全会受影响——图标可能错位或变形。真要精细控制，就得用 span 包住具体文字，单独声明样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
