HTML中保留空格需用实体码或CSS,日常够用的4个是: (不换行空格)、 (半em宽)、 (1em宽)、 (1/6em窄空格);优先用CSS控制空白更灵活可靠。

HTML 里直接敲空格,浏览器会自动合并成一个;想保留多个空格、制表位或不换行空格,必须用实体码或 CSS。别背一堆,记住这 4 个就够日常用了。
:最常用,不换行空格
这是你每天都会碰到的。比如“姓名: 张三”,防止冒号和名字被折到两行;或者表格里对齐文字时避免塌缩。
- 它不会被浏览器合并,也不会在行尾换行
- 连续写 5 个
就是 5 个可见空格 - 别写成
 (少个分号)——多数浏览器会容错,但严格模式下可能失效 - 不能替代 CSS 的
text-indent或padding做缩进,语义不对,可访问性差
和 :按字体单位控制宽度
这两个是“相对空格”,宽度取决于当前字体的 en(约半个 em)和 em(约一个字符宽)。适合排版对齐,比如中文文档里的项目符号缩进。
-
≈ 0.5em,常用于单词间微调 -
≈ 1em,接近一个汉字宽度,中英文混排时比更协调 - 注意:实际像素宽度随字体变化,不适合做固定像素布局
- 不要指望它们在所有字体下都精准——思源黑体和 Courier New 下表现可能差 2px
:窄空格,数学和单位场景专用
宽度约 1/6em,典型用途是数字和单位之间,比如“100 km”或“f(x) = x²”。普通正文里基本用不到。
立即学习“前端免费学习笔记(深入)”;
- 比
细得多,肉眼容易忽略,调试时建议临时加背景色确认 - LaTeX 导出 HTML 时经常自动生成它,手动写没必要
- 如果只是想让“100 km”看着舒服,用一个
更稳妥,兼容性无风险
CSS 替代方案更灵活,优先考虑
实体码本质是“把样式写进内容”,长期看难维护。真要控制空白,CSS 的 white-space 和 margin 更可控。
-
white-space: pre-wrap可保留换行+空格,适合代码块或地址显示 -
letter-spacing或word-spacing调整字距词距,比堆干净 - 用
margin-left实现缩进,语义清晰,响应式也好处理 - 唯一绕不开实体码的场景:纯 HTML 邮件模板(很多客户端禁用 CSS)
推荐写法:
价格:¥99
旧写法(不推荐):
价格: ¥99
实体码不是越多越好, 、 、 这三个覆盖 95% 场景;其他像 ​ 或 ⁠ 属于特殊排版需求,遇到再查——临时 Google “HTML zero width space” 比硬背清单快得多。











