letter-spacing 是控制字符间距的正确 CSS 属性,用于中英文字符间精细调整;“Spacing Token”是 .NET Razor 服务端解析概念,与前端排版无关,浏览器不识别 spacing-token 等非标准属性。

letter-spacing 是你真正该用的属性,不是什么“Spacing Token”。HTML 里没有叫 “间距Token” 的标准概念,这个词容易让人联想到 .NET Razor 内部的 IsSpacingToken(Boolean) 方法——但它只在服务器端 Razor 解析器里用,和前端排版完全无关。
别被“Spacing Token”带偏:这不是 CSS 或 HTML 标准术语
搜索“HTML 间距 Token”,常会撞见 System.Web.Razor.Parser.HtmlMarkupParser.IsSpacingToken(Boolean) 这个 .NET 方法。它干的事是:在服务端解析 .cshtml 文件时,判断某个 HTML 符号(比如空格、换行)是否应被当作“空白标记”跳过或保留。普通前端开发根本接触不到它,也不该把它和 CSS 字间距混为一谈。
- 这个方法参数
includeNewLines只影响 Razor 模板编译阶段的 token 分类,和浏览器渲染无关 - 你在 Chrome DevTools 里调样式、写
style标签、改div的间距,跟它零关系 - 把它当 CSS 属性去试,比如写
spacing-token: 2px,浏览器直接忽略,不报错也不生效
letter-spacing 才是控制中文/英文字符间距的正解
想让“标题”每个字拉开一点,“按钮文字”更紧凑,就用 letter-spacing。它作用于所有字符(汉字、英文字母、数字、标点),不管有没有空格。
- 值可以是
normal(等价于0,但不同字体下实际像素可能略有差异) - 推荐用
px或em:比如letter-spacing: 0.05em比固定1px更适配缩放 - 负值有效,但
letter-spacing: -2px在font-size: 12px下容易让汉字粘连,真机 Safari 尤其明显 - 避免在
body或全局表单元素(如input)上滥用,否则数字变成“1 2 3”,图标字体错位
word-spacing 对中文基本无效,别硬套
它只识别“被空白符(空格、制表符、换行)包围的字符串”为一个“词”。纯中文段落如 欢迎来到首页 整个是一词,设 word-spacing: 10px 没反应。
- 只有中间带空格才起效:
—— “立即”和“购买”之间加空隙 - 中英文混排时,英文部分会被单独识别,中文部分不变,容易造成视觉不一致
- 和
letter-spacing同时用会叠加:比如letter-spacing: 1px+word-spacing: 4px在“立即 购买”上,结果是“立”“即”各+1px,“立即”与“购买”之间+4px,总间隙远超预期 - 在
display: flex或grid容器里,word-spacing可能被gap或justify-content覆盖,优先级更低
表格单元格间距用 cellspacing?现代写法早换了
老式 ASP.NET WebForms 里有 HtmlTable.CellSpacing 属性,对应 HTML 的 cellspacing 特性。但它已被废弃多年,现代标准只认 CSS 的 border-spacing(配合 border-collapse: separate)。
- HTML 属性
cellspacing="2"在 HTML5 中不合法,验证器会警告 - 正确写法是:
table { border-collapse: separate; border-spacing: 2px; } -
border-spacing支持两个值:border-spacing: 2px 4px表示水平 2px、垂直 4px - 如果用了
border-collapse: collapse,border-spacing直接失效
复杂点在于:不同字体对 letter-spacing 的响应不一致,WebFont 加载失败时 fallback 字体可能让间距突变;而 word-spacing 的“词”判定逻辑藏在浏览器引擎里,没法用 CSS 覆盖或调试。别指望一个属性通吃所有场景。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











