letter-spacing 是控制汉字/字母间空隙的唯一可靠CSS属性；white-space 和实体仅用于保留可见空格，非布局工具；word-spacing 对纯中文无效，因其依赖空格分词；图片/inline-block 间隙源于HTML换行空格，需用flex+gap或font-size:0解决。

别用敲空格键或 堆叠来控制字符间隙——letter-spacing 才是唯一可靠手段；white-space 和实体仅用于文本内“可见空格”的保留，不是布局工具。

letter-spacing 是控制汉字/字母间空隙的正解

HTML 没有“字间距”这个原生属性，letter-spacing 是 CSS 中唯一能均匀拉伸或压缩字符间水平距离的属性。它对每个字符（包括汉字、英文字母、标点）都生效，不依赖空格分隔。

• 设 letter-spacing: 1px → 每个字右边多出 1px 空隙（含标点）
• 设 letter-spacing: -0.3px → 收紧，但小字号下易粘连（尤其 iOS Safari）
• 用 em 单位更适配响应式：letter-spacing: 0.04em 在 16px 字体下 ≈ 0.64px
• 避免全局设置：body { letter-spacing: 1px } 会让数字变成 1 2 3、 边框错位、图标字体（如 ）间距异常

word-spacing 对中文基本无效，别误用

word-spacing 只作用于浏览器识别出的“单词”，而识别依据是空格或标点分隔。纯中文段落无空格，所以设了也白设。

• 给

  联系我们

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载
  加 word-spacing: 4px → 四个汉字毫无变化
• 但里面夹着英文邮箱 contact@example.com → @ 符号前后会被撑开（因 . 和 @ 被当分词符）
• 若真要微调中西混排，比如按钮写成 登 录（中间加空格），再配 word-spacing，才可能起效
• letter-spacing 和 word-spacing 同时存在会叠加，调试时建议先关掉一个

什么时候才该用   或 white-space

这些不是“调间距”的方案，而是“保空格”的手段，适用场景非常具体：

•  ：插入一个不可折叠、不换行的空格，适合姓名间固定分隔（如 张 三）、标题缩进等
•  （ ）或  （ ）：比   更窄，用于标点与字母间微调（如 100 km/h）
• white-space: pre-wrap：整段保留源码空格和换行，又不强制等宽字体，比
  更可控
• 千万别给容器设 white-space: nowrap 还指望图标+文字靠空格分开——它们会直接粘成一块

图片/inline-block 元素间的 4px 缝隙不是 letter-spacing 的锅

如果你看到 或 display: inline-block 元素之间有约 4px 空白，那不是字符间距问题，是 HTML 源码换行被解析为空格，再按父容器 font-size 渲染出来的间隙。

• 这不是 letter-spacing 控制的范围，改它没用
• 根治法：删掉标签间所有换行和空格，写成
• 次选法：父容器设 font-size: 0，子元素再单独设回正常 font-size
• 现代推荐：改用 display: flex + gap，天然忽略源码空白

最易被忽略的一点：所有“空格导致的视觉偏差”，首先要分清是文本内容里的空隙，还是布局结构里的间隙——前者归 letter-spacing 或实体，后者必须由 margin/padding/gap 解决，混用只会让问题更难定位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！