HTML中空格会被浏览器自动合并，需用 、 、 实体或white-space CSS属性控制空白效果，关键在于根据语义和场景选择合适方案。

HTML 里直接敲空格键，浏览器会自动合并成一个空格——这不是“打不出来”，而是 HTML 的默认渲染行为。想保留多个空格、缩进或特殊空白效果，必须用 HTML 实体或 CSS 控制。

用   打不可折叠的普通空格

这是最常用也最容易踩坑的方式。  是 non-breaking space（不换行空格），浏览器不会把它和其他空格合并，也不会在行尾自动断开。

• 适合场景：按钮文字间加固定间距、表格中对齐、防止“100 元”被折成两行
• 注意：连打多个   会生成多个独立空格，但可读性差，维护困难
• 别误写成 &nsbp; 或 &nbsp（缺分号）——后者会被浏览器忽略或报解析错误

<p>姓名：<span>张</span><code>   </code><span>三</span></p>

用   和   控制更宽的空白

它们是语义更明确的空格实体，宽度由字体决定，但比   更“有单位感”：

•   ≈ 半个中文字符宽（en width），常用于英文排版中的词间微调
•   ≈ 一个中文字符宽（em width），适合模拟中文对齐、缩进一格
• 注意：不是所有字体都严格按此渲染，移动端或小字号下可能差异明显

<div>第一章<code>&emsp;</code>引言</div>

用 white-space CSS 属性批量控制空格行为

当需要整块文本保留原始缩进和换行（比如代码片段、诗歌、日志输出），靠堆   不现实，该上 CSS：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• white-space: pre —— 完全保留空格和换行，但不自动换行（超出容器也不折）
• white-space: pre-wrap —— 保留空格和换行，同时允许长单词/文本自动折行（最常用）
• white-space: pre-line —— 合并连续空格，但保留换行符（适合纯文本转 HTML）

<pre style="white-space: pre-wrap">  这里有两个空格开头  
    这里是四个空格 + 换行</pre>

编辑器里快速输入空格实体的技巧

手动敲   太慢，不同编辑器有对应捷径：

• VS Code：输入 & 后触发 Emmet 补全，选  ；或设置用户代码片段，绑定快捷键如 spc →  
• Sublime Text：安装插件 “HTML-CSS-Class-Completion”，支持 & + Tab 补全常见实体
• WebStorm：启用 “Auto-insert” for HTML entities，在输入 & 后自动提示
• 通用底线：别依赖复制粘贴——容易混入全角空格或零宽字符，导致样式异常或校验失败

真正难的不是“怎么打出空格”，而是判断该用实体还是 CSS、该保留还是压缩空白——多数布局问题，其实出在没想清楚这里。