直接敲空格无效是因为html解析阶段将连续空白字符（空格、换行、制表符）合并为单个空格，且裁去首尾空白； 是不可断行空格实体，能强制保留可见空格。

为什么直接敲空格没用

HTML 会把连续的空白字符（空格、换行、制表符）合并成一个普通空格，再渲染时还会把首尾空白裁掉。所以 <p>hello world</p> 和 <p>hello world</p> 效果完全一样——中间只显示一个空格。

  是最常用也最容易出错的实体

  是 non-breaking space，它不会被浏览器合并或折行，适合做“强制保留的空格”。但要注意：

• 必须写成  ，漏掉开头的 & 就变成纯文本

  ，不生效

• 多个   连用才能模拟多个空格，比如 <code>name   age 显示为 “name   age”
• 它会让光标无法在两个   之间停留（对可编辑内容如 contenteditable 有影响）

其他空格实体的适用场景

不同宽度和行为的空格实体，选错会导致排版错乱或复制粘贴异常：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

•  ：半个中文字符宽（约 0.5em），常用于对齐数字列
•  ：一个中文字符宽（约 1em），比   宽，适合替代中文语境下的缩进
•  ：窄空格（约 1/6em），适合数学公式或单位间（如 100 kg）
• &zwsp;（zero-width space）：不可见，仅作断行提示，不占空间

注意：  和   等会被复制进剪贴板，而 CSS 的 margin 或 padding 不会——如果内容要被用户复制，优先考虑 CSS 方案。

什么时候不该用 HTML 实体

纯靠实体堆空格是反模式，尤其在响应式或动态内容中：

• 表格对齐、文字缩进、按钮内边距，应该用 CSS 的 text-indent、padding、letter-spacing
• 需要等宽对齐（如日志输出），用 <pre class="brush:php;toolbar:false;"></pre> 或 white-space: pre
• JS 动态插入空格时，别拼接 " " 字符串，而应设置 textContent 配合 String.fromCharCode(160)（即   的 Unicode）或直接用 innerHTML（但需防 XSS）

实体本质是标记，不是样式工具；真正容易被忽略的是：一旦用了  ，就等于把表现逻辑硬编码进了 HTML 结构里。

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