空格的代码是什么？HTML 中常见空格写法详解
在 HTML 里，“空格”并不只有一种写法。键盘敲出的普通空格、HTML 字符实体 、全角空格，以及 CSS 设置的间距，看起来可能相似，实际含义和适用场景却不同。
如果你只想在句子中正常分隔单词，直接输入普通空格即可。如果你要在 HTML 文本中保留一个不会被折叠的空格，可以使用 。如果目标是调整版面距离，通常应使用 CSS 的 margin、gap 等布局属性，而不是连续插入空格字符。
本文将说明常见空格写法、浏览器如何处理空白、字符实体的边界，以及代码示例中的转义规则。
先分清三种“空格”
普通空格：键盘上的空格键
键盘空格键通常输入 Unicode 字符 U+0020，也就是常见的普通空格。在 HTML 源码中直接输入它就可以：
<p>这是一段包含普通空格的文字。</p>普通空格适合正常文本排版，例如分隔中文与英文、分隔英文单词，或在标记属性之间分隔属性。在 HTML 正文中，连续的普通空格、换行和制表符通常会被浏览器折叠成一个可见的空格；它们不会按源码里的数量原样显示。
不换行空格：
是 HTML 命名字符引用，代表不换行空格（non-breaking space），对应的 Unicode 字符是 U+00A0。它在显示时通常类似一个普通空格，但会阻止浏览器在该处断行。
<p>价格：10 元</p>
<p>A B</p>上例中的 10 元 倾向于作为一个整体留在同一行；若一行放不下，浏览器会尝试在其他允许断行的位置换行，而不是在这个空格处拆开。A B 中的 A 和 B 也不会因这个空格而分到两行。
不换行空格适合少量需要保持组合关系的内容，例如数字和单位、姓名中的特定组成部分，或短标签中不希望拆开的词。但它不适合作为通用的“加宽空格”：它同时改变了换行行为，密集使用可能导致窄屏溢出或行宽难以控制。
其他 Unicode 空白字符
HTML 还可用字符引用表示其他空白字符，常见的有：
 ：en space，通常称为半身空格，传统排版中约为字宽的一半。 ：em space，传统排版中约为一个字宽。 ：thin space，较窄的空格。 ：U+2009 Thin Space 的十六进制数字字符引用。　：U+3000 全角空格的十进制数字字符引用。
示例：
<p>普通空格：甲 乙</p>
<p>半身空格：甲 乙</p>
<p>宽空格：甲 乙</p>
<p>窄空格：甲 乙</p>
<p>全角空格：甲　乙</p>这些字符的实际视觉宽度会受字体、字体回退、排版引擎和渲染环境影响。名称中的“半身”“全身”是排版概念，不应理解为在所有设备上都严格等于某个固定像素值。需要稳定控制布局尺寸时，应使用 CSS，而非依赖字符本身的字宽。
为什么连续空格常常只显示一个？
HTML 文本通常采用折叠空白的规则。普通空格、制表符和源码换行等空白，在常见的正常文本布局中会被合并处理。下面源码中的多个空格，通常不会显示成多个间隔：
<p>甲 乙
丙</p>浏览器一般会把“甲”和“乙”之间的连续普通空格显示为一个空格，源码里的换行也通常不会直接成为可见换行。HTML 标记之间的缩进同样通常不会形成额外的连续间距：
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>空白折叠是浏览器的文本排版行为，并不意味着源码中的字符被删除。若要保留源码空白的布局效果，可以选用 <pre> 元素，或使用 CSS 的 white-space 属性。
用 CSS 保留空白或控制间距
white-space 控制元素中的空白折叠和换行行为。常见取值各有用途：
normal：折叠连续空白，文本可以正常换行；这是常见的默认效果。pre：保留空格、制表符和换行，同时不在普通空白处自动折行，长行可能溢出。pre-wrap：保留空白和换行，并允许长行折行。pre-line：保留换行，但会折叠连续空格等空白。break-spaces：保留空白，并对空格处的换行和行尾空白采用更细致的处理；具体视觉效果需结合布局测试。
下面是可直接运行的示例。将代码保存为 .html 文件后用浏览器打开，可以比较普通文本和保留空白的效果：
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<title>空白处理示例</title>
<style>
.normal { white-space: normal; }
.preserve { white-space: pre-wrap; }
.gap {
display: flex;
gap: 1rem;
align-items: center;
}
.box {
border: 1px solid #999;
padding: .5rem;
}
</style>
<p class="normal">普通空格：甲 乙
丙</p>
<p class="preserve">保留空白：甲 乙
丙</p>
<div class="gap">
<span class="box">左侧</span>
<span class="box">右侧</span>
</div>
</html>如果目的是在两个元素之间留出距离，应优先用布局属性，例如 Flexbox 或 Grid 的 gap，或在单个元素上设置 margin。这类间距可随屏幕尺寸、字体和布局调整，也不会把空格混进文案内容中。
<div class="items">
<span>保存</span>
<span>取消</span>
</div>
<style>
.items {
display: flex;
gap: 12px;
}
</style>字符实体怎么写？
HTML 字符引用有命名形式和数字形式。常见命名形式以 & 开始，以分号 ; 结束，例如：
 
 
 数字字符引用可以使用十进制或十六进制。十进制以 &# 开始，十六进制以 &#x 或 &#X 开始，通常以分号结束：
  <!-- U+00A0，不换行空格 -->
  <!-- U+00A0，不换行空格 -->
  <!-- U+2002，en space -->
  <!-- U+2003，em space -->
　 <!-- U+3000，全角空格 -->在 HTML 源码中，十进制和十六进制写法都可表示相应的 Unicode 码点。日常页面优先选择易读、含义明确的写法；需要精确指定字符时，数字字符引用也很有用。不要把字符编码值和显示宽度混为一谈：一个码点不保证在不同字体里占据相同的像素宽度。
字符引用用于 HTML 文本时，会被解析为对应字符。它不是在页面上显示字符引用拼写本身的指令。比如，源文件写 ，页面显示的是一个不换行空格，而不是字符串“ ”。
代码示例为什么要写成 &nbsp;？
本文需要把 HTML 源码展示给读者，因此示例中的尖括号和字符引用都经过了 HTML 转义。比如，正文里的 &nbsp; 在页面上呈现为代码文本 。如果在正文 HTML 中直接写 ，浏览器会把它解析成空格，代码框里就看不到实体的拼写。
在 <pre><code> 中展示源码时，至少要注意：
- 代码中的
<应写成<，否则可能被解析为标签。 - 代码中的
>通常写成>，便于清楚展示标签结束符。 - 若要展示字面量
，其中的&应写成&。
例如，页面源码中这样写：
<pre><code><p>甲&nbsp;乙</p></code></pre>页面上显示的代码就是：
<p>甲 乙</p>注意区分两层用途：第一段是“用于展示代码的 HTML”；第二段是“读者复制后可作为 HTML 使用的代码”。如果把第二段里的 再额外转义一遍，读者复制到 HTML 文件后可能得到字面量字符引用，而不是预期的空格。
空格的写法如何选择？
| 需求 | 推荐做法 | 原因 |
|---|---|---|
| 正常句子、英文单词之间分隔 | 直接使用普通空格 | 符合一般文本排版规则，便于编辑和维护。 |
| 数字与单位等内容尽量不拆行 | 有明确排版需求时使用 | 它能阻止在该空格处断行，但不应滥用。 |
| 两个元素之间留固定或响应式距离 | 使用 CSS 的 gap、margin 等 | 间距属于布局，不是文案内容。 |
| 展示代码、诗句或需要保留换行的文本 | 使用 <pre> 或设置合适的 white-space | 可以按需求保留空格和换行。 |
| 排版中的窄空格或宽空格 | 按语义选择  、 、  等，并检查目标字体 | 字符宽度和视觉效果会因环境而异。 |
常见错误与边界
连续写多个普通空格，期待它们都显示出来
在一般 HTML 文本中，连续普通空格通常会折叠。若确实要保留空白，使用 white-space: pre-wrap 等 CSS；若只是给元素增加间距，改用布局属性。用很多个 顶替布局，会令内容难以维护，也可能在不同屏幕上出现溢出。
把 当成普通空格的完全替代品
二者的关键差别是换行行为。普通空格通常允许浏览器在此处断行；不换行空格通常不允许。若一行内容中插入过多不换行空格，可换行的位置会减少，窄屏上更容易出现横向溢出。
省略字符引用的分号
应养成写完整字符引用的习惯，例如写 ，不要依赖省略分号的解析规则。省略分号时，后面的字符可能影响解析结果；在属性值等上下文里尤其容易造成歧义。完整写出分号更明确，也更利于兼容和维护。
在属性值中随意插入字符实体
字符引用在 HTML 文本和属性值中的解析细节会受到上下文影响。写属性时应使用引号，并确保输出经过正确的 HTML 转义。若属性值由用户输入生成，不能通过插入空格实体来代替输入验证或安全处理。
以为空格能清理不可信内容
空格不是安全过滤器。把危险字符串中的字符替换成空格、将多个空格折叠，或把文本改写成 ，都不能可靠地防止 HTML 注入、脚本执行、URL 欺骗或其他输入处理问题。安全输出应根据上下文进行正确编码：HTML 文本、HTML 属性、URL 和 JavaScript 字符串所需的处理并不相同。需要插入用户提供的纯文本时，应使用框架提供的文本节点或上下文适用的转义方式，不要把它拼接成可执行标记。
把全角空格当作普通空格
全角空格（U+3000）是不同的 Unicode 字符，不是键盘普通空格的另一种拼写。它可能有不同的字宽、换行表现和搜索匹配结果。若只是分隔句子，通常不需要用全角空格；若内容确实要求保留该字符，应确认字体、输入法和数据处理链路都符合预期。
把制表符当作固定宽度的空格
制表符 U+0009 在 HTML 正常文本布局中通常会像其他可折叠空白一样处理，并不保证按固定数量的字符对齐。若要展示代码缩进，可使用 <pre> 或设置 white-space，并按目标字体和页面宽度测试。若是表格数据，应使用表格或 CSS 布局，不要靠制表符排版。
忽略复制、搜索和数据处理中的区别
页面上看起来相同的空格，底层字符可能不同。普通空格 U+0020、不换行空格 U+00A0 和全角空格 U+3000 在复制、搜索、比较、表单校验或数据清洗时可能被区别对待。若内容要参与精确匹配或机器处理，应明确使用哪类字符，并在需要时进行规范化；不要只凭视觉判断字符串相同。
关于字符范围和兼容性的说明
HTML 数字字符引用用于表示 Unicode 码点。并非任意数字都能对应有效的 Unicode 字符：超出 Unicode 码点范围的数值，以及代理项区间内的数值，不是可直接表示的 Unicode 标量值；部分控制字符和其他特殊值在 HTML 解析中也有专门处理规则。因此，不要把“数字字符引用语法能写出来”理解为“任何数字都会产生一个可正常显示的字符”。处理外部数据时，应采用成熟的 HTML 解析或转义工具，而不是自己拼接未验证的数字引用。
常用空格实体在现代浏览器中支持广泛，但具体字形、宽度和断行仍受字体与排版规则影响。如果页面必须在特定浏览器、操作系统或字体下精确呈现，应该在目标环境进行实际测试。对通常的网页布局来说，用 CSS 设定尺寸和布局，比依赖特殊空格字符更可靠。
简明结论
- 普通文本分隔：用键盘输入的普通空格。
- 需要阻止在某个空格处换行：有选择地用
。 - 需要排版宽度不同的空格：可用
 、 、 等，但要检查字体效果。 - 需要保留多个空格或换行：用
<pre>或 CSSwhite-space。 - 需要元素之间的距离：用
gap、margin等 CSS 布局方式。 - 展示 HTML 代码：把代码中的
<、>和字面量&正确转义；代码里的实体写法通常要把&写为&。
理解空格的关键，不是记住越多实体越好，而是区分字符内容、换行规则和页面布局。按需求选用普通空格、字符实体或 CSS，既能让显示结果更可控，也能让 HTML 更易读、易维护。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
