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、<input>边框错位、图标字体（如<i class="fa-user"></i>）间距异常
word-spacing 对中文基本无效，别误用
word-spacing 只作用于浏览器识别出的“单词”，而识别依据是空格或标点分隔。纯中文段落无空格，所以设了也白设。
- 给
<p>联系我们</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>加word-spacing: 4px→ 四个汉字毫无变化 - 但里面夹着英文邮箱
contact@example.com→ @ 符号前后会被撑开（因 . 和 @ 被当分词符） - 若真要微调中西混排，比如按钮写成
<button>登 录</button>（中间加空格），再配word-spacing，才可能起效 -
letter-spacing和word-spacing同时存在会叠加，调试时建议先关掉一个
什么时候才该用 或 white-space
这些不是“调间距”的方案，而是“保空格”的手段，适用场景非常具体：
-
张 三）、标题缩进等 -
 （ ）：比100 km/h） -
white-space: pre-wrap：整段保留源码空格和换行，又不强制等宽字体，比<pre class="brush:php;toolbar:false;"></pre>更可控 - 千万别给容器设
white-space: nowrap还指望图标+文字靠空格分开——它们会直接粘成一块
图片/inline-block 元素间的 4px 缝隙不是 letter-spacing 的锅
如果你看到 <img alt="HTML字符空格间隙怎么控制？宽度调整指南" > 或 display: inline-block 元素之间有约 4px 空白，那不是字符间距问题，是 HTML 源码换行被解析为空格，再按父容器 font-size 渲染出来的间隙。
- 这不是
letter-spacing控制的范围，改它没用 - 根治法：删掉标签间所有换行和空格，写成
<img alt="HTML字符空格间隙怎么控制？宽度调整指南" ><img alt="HTML字符空格间隙怎么控制？宽度调整指南" ><img alt="HTML字符空格间隙怎么控制？宽度调整指南" > - 次选法：父容器设
font-size: 0，子元素再单独设回正常font-size - 现代推荐：改用
display: flex+gap，天然忽略源码空白
最易被忽略的一点：所有“空格导致的视觉偏差”，首先要分清是文本内容里的空隙，还是布局结构里的间隙——前者归 letter-spacing 或实体，后者必须由 margin/padding/gap 解决，混用只会让问题更难定位。
