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 对中文基本无效,别硬套
它只识别“被空白符(空格、制表符、换行)包围的字符串”为一个“词”。纯中文段落如 <p>欢迎来到首页</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a>
<p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p>
</div>
<a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 整个是一词,设 word-spacing: 10px 没反应。
- 只有中间带空格才起效:
<button>立即 购买</button>—— “立即”和“购买”之间加空隙 - 中英文混排时,英文部分会被单独识别,中文部分不变,容易造成视觉不一致
- 和
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 覆盖或调试。别指望一个属性通吃所有场景。


















