应使用 或CSS的letter-spacing实现汉字间稳定空隙,因HTML会压缩连续空格; 适合局部微调,letter-spacing适合整体字距控制。

直接敲空格键没用,浏览器会把连续空格合并成一个;想在两个汉字之间稳定留出视觉空隙,得用 或 CSS 控制,而不是靠键盘空格。
为什么键盘空格在汉字间“消失”了
HTML 规范规定:所有连续空白字符(空格、制表符、换行)都会被压缩为单个空格,且首尾空格会被忽略。两个汉字中间敲 5 个空格,渲染出来还是紧挨着的——这不是 bug,是标准行为。
常见错误现象:<p>你好 world</p> 中英文之间有空隙,但 <p>你好世界</p> 里加再多空格也看不出区别。
- 纯文本内嵌空格必须用实体或 CSS 才能“锁住”宽度
-
是不换行空格,不会被合并,也不会折行 - 用
( )或( )更准:前者≈半个汉字宽,后者≈一个汉字宽,中西文混排时对齐更稳
用 插入不可断开的空格
这是最轻量、兼容性最好的做法,适合少量、确定位置的间隙,比如“姓名 张三”中间空两格。
立即学习“前端免费学习笔记(深入)”;
使用示例:<p>北京 上海</p> 渲染后“北京”和“上海”之间就是两个固定宽度空隙。
- 每个
占一个字符位置,宽度受当前字体影响(等宽字体下更一致) - 不要混用
和:语义不同,是“窄空格”,IE8+ 支持,但某些邮件客户端可能回退成普通空格 - 连续写 10 个
不推荐——可读性差,维护成本高,此时该换 CSS
用 letter-spacing 统一控制字间距
如果目标是让整段中文“字与字之间拉开距离”,比如导航栏文字、标题微调,letter-spacing 比堆 更合理。
使用示例:<p style="letter-spacing: 4px;">欢迎光临</p> ——每个汉字间增加 4px 间隙。
- 支持负值(
letter-spacing: -1px;),但小心重叠,尤其小字号时 - 对中英文都生效,所以“Hello 世界”里 H-e-l-l-o 之间也会被拉宽
- 若只要调某两个字之间的距(如“联系
电话”),应包裹<span>单独设样式,避免影响全文
别踩这些坑
很多人试过 word-spacing 或 margin,结果发现没反应——因为这两个属性对中文基本无效:word-spacing 只作用于“以空格分隔的单词”,而中文词间无空格;margin 是元素级外边距,不能插在两个字符之间。
- 想用
pre标签?它保留空格,但会强制等宽字体、禁用自动换行,破坏阅读流 - 用
white-space: pre-wrap?它确实能保留空格,但需要包裹整个文本块,不是“只动两个字之间” - JS 动态插入空格时,别用
innerHTML = 'A ' + 'B'——空格会被吞;改用textContent = 'A\u00a0\u00a0B'(\u00a0就是的 Unicode)
真正要解决“两个汉字之间加空格”,核心就两条路:局部微调用 (或 ),整体风格用 letter-spacing;其他方法要么过度,要么根本不起作用。



















