在HTML中直接敲空格，浏览器往往不会按你期望的方式显示，这是新手最常踩的坑之一。HTML规范规定，源代码中连续的空白字符（包括空格、制表符、换行）在渲染时会被合并成一个空格，这个机制叫做空白折叠。所以想在页面上呈现多个空格，必须借助字符实体或者其他手段。下面详细介绍各种空格符号的打法，以及标题层级之间间距的规范设置方式。
一、HTML空格符号的几种常用打法
最经典的空格实体是 ，它代表不换行空格（No-Break Space）。它的宽度等于一个普通字符的宽度，而且不会被空白折叠机制合并，也不允许在其位置换行。除了 ，HTML还提供了另外几个宽度不同的空格实体，经常被忽视但非常实用。
- ：不换行空格，宽度约为当前字体的一半左右（相当于一个常规空格），多个连续使用时不会被合并。
-  ：半角空格，宽度等于一个em的一半，也就是两个字宽的一半，常用于中文排版中的较小留白。
-  ：全角空格，宽度正好是一个em，即一个中文字符的宽度，中文缩进场景用得最多。
-  ：窄空格，宽度约为em的六分之一，适合用于数字与单位之间的细微间隔。
下面通过一个代码示例看它们的实际效果：
<p>首行缩进示例： 这里用了两个全角空格做缩进。</p> <p>半角空格：A B C</p> <p>窄空格：100 km 表示数字与单位间的间隔</p> <p>连续空格：这 里 有多个空格</p>
需要注意，实体中的分号不能省略，写成 不带分号虽然在部分浏览器里也能解析，但这是不规范的写法，严格模式下可能失效。另外，空格实体属于HTML实体，在HTML文件中使用没问题，但如果要在JavaScript字符串或者CSS的content属性里使用，需要换成对应的Unicode转义形式，比如\u00A0。
二、为什么连续敲空格只显示一个
很多初学者在编辑器里按下十几次空格键，刷新页面后发现只剩下一个空格，于是怀疑编辑器出了问题。实际上这是浏览器的正常行为，根源在于HTML的空白折叠规则。浏览器在解析文档时，会把相邻的空白字符合并成一个空格，这么做是为了让源代码可以自由缩进、换行而不影响页面呈现。
如果想保留源码中的空白格式，可以借助CSS的white-space属性。将元素的white-space设置为pre，浏览器就会像处理<pre>标签一样保留所有空格和换行：
<style>
.keep-space {
white-space: pre; /* 保留源码中的空格和换行 */
}
</style>
<p class="keep-space">这 里 有 多 个 空 格</p>white-space属性有几个常用取值：normal是默认值，执行空白折叠；nowrap强制不换行但仍然折叠空白；pre保留空白且不换行；pre-wrap保留空白同时允许换行；pre-line合并空格但保留换行符。根据实际排版需求选择合适的值，比在源码里塞满 要优雅得多。
从代码规范的角度讲，能用CSS解决的间距问题就不应该用空格实体硬凑。比如想让两个元素之间留白，正确做法是设置margin或padding，而不是在标签之间插入一串 。空格实体应该只用于确实需要字符级空格的场景，比如诗歌排版、数学公式中的间隔等。
三、标题层级之间空格与间距的规范设置
标题标签<h1>到<h6>是块级元素，默认各占一行，标签之间即使写了空格也不会产生可见间距。想让标题之间拉开距离，标准做法是通过CSS的margin属性控制。浏览器默认会给标题设置上下外边距，实际开发中通常先重置再按设计稿调整：
<style>
h1, h2, h3, h4, h5, h6 {
margin: 0; /* 先清除默认间距 */
font-weight: 600;
}
h1 { margin-bottom: 16px; }
h2 { margin-top: 24px; margin-bottom: 12px; }
h3 { margin-top: 20px; margin-bottom: 8px; }
</style>层级越高，字号越大，相应的间距也应该越大，这样视觉层级才清晰。一般来说，标题的上边距略大于下边距，因为标题与其下方内容的关系更紧密，与其上方内容的关系相对疏远。常见的经验值是：h1的上下间距在20到32像素之间，h2在16到24像素之间，h3及以下在12到20像素之间，具体数值应结合整体行高和段落间距统一调整。
还有一种情况是标题内部需要空格，比如标题文字前想做装饰性缩进。规范的做法不是用多个 堆叠，而是用text-indent属性控制首行缩进，或者用padding-left做整体左缩进：
<style>
.article-title {
text-indent: 2em; /* 首行缩进两个字符宽度 */
padding-left: 8px;
border-left: 4px solid #1890ff;
}
</style>
<h2 class="article-title">这是一个带装饰缩进的标题</h2>总结一下规范要点：结构性间距交给CSS的margin和padding处理，文字内部的字符级空格才使用 、 等实体，中文段落首行缩进优先使用text-indent: 2em而不是手打空格。遵循这些原则，写出来的页面代码既符合W3C规范，也方便后期维护和响应式适配。