很多刚学HTML的人都碰到过这个问题：代码里敲上好几个空格，保存刷新页面，浏览器只显示一个空格。一开始还会怀疑编辑器出问题，换编辑器重试，结果还是一样。这其实是HTML本身的渲染规则，源码里连续的空格、换行符、Tab制表符，浏览器渲染页面时都会合并成单个空格。哪怕输入十个连续空格，页面上只会展示一个。想要页面呈现多个连续空格，得换别的写法。
最直接的方案就是 。它是不换行空格的实体字符，浏览器不会合并，写几个就会显示几个。比如写a b，a和b中间就会出现三个空格距离。但 有个特性，它属于不换行空格。文字行到达容器边界时，浏览器不会在 位置自动换行。这个特性有些场景很实用，比如写10 kg，防止数字和单位被拆分到两行。但如果大面积在段落文本里使用，会把单行文字撑宽，出现横向滚动条。所以它适合小范围微调间距，不适合用来做页面布局。
除了 ，HTML还提供几种宽度不同的空格实体。 是半角空格，宽度大约是普通空格的一半； 是全角空格，宽度近似一个汉字； 是窄空格，比半角空格更细。精细调整文字间距的时候很合适，中英文混排时增加一点留白，或是数字单位之间放置更窄的间隔。它们的共同点就是不会被浏览器折叠，原样展示。
如果需要完整保留文本原有格式，比如代码片段、诗歌文本，<pre>标签是最简单的选择。放在<pre>内部的内容，空格和换行都会按照源码原样展示，浏览器不会做合并处理。但<pre>默认使用等宽字体，自带背景和边距样式。如果只想保留空格换行，不想附带这些默认样式，可以使用CSS的white-space属性。white-space: pre效果和<pre>一致，完整保留空格换行。white-space: pre-wrap保留空格换行，同时允许文字在容器边缘自动换行，不会撑开页面布局。white-space: pre-line仅保留换行，连续空格依旧合并。这几个属性值，写评论区、聊天记录、代码展示页面经常用到。
不少人习惯用 控制元素间距，比如两个按钮中间拉开距离，图标和文字之间留白。这种方式其实并不推荐。空格实体本质属于文本内容，会跟随字体大小、行高、换行规则变化，不同设备渲染效果存在差异。想要控制元素间距，CSS的margin、padding或者gap可控性更强。gap在flex和grid布局里使用很方便，父元素设置display: flex; gap: 8px;，子元素之间自动产生间距，不用在HTML代码里堆砌大量 。
还有一个容易踩坑的细节，行内元素之间产生的空白缝隙。写两个<span>或者<a>标签，如果标签之间换行或者敲了空格，浏览器会渲染出空白字符，导致两个按钮中间多出一道缝隙。有时候这个缝隙是需要的，但如果不需要，就得把标签紧贴在一起写，或者给父元素设置font-size: 0，再单独给子元素恢复字号。使用flex布局也能消除这个间隙，flex容器内部的空白文本节点不会生成间距。写导航栏、按钮组的时候经常遇到这个问题，调试很久以为是margin设置问题，根源其实是源码内的换行。
HTML属性内的空格和文本节点空格不是一回事。举个例子class="btn primary"，中间空格用来分隔两个类名，属于语法分隔符，不会渲染成页面内容。style属性写margin: 10px 20px;，空格用来区分属性值，页面上不会显示。这类空格是给解析器识别用的，不影响页面展示效果。
如果只是调整文字内部字符间距和单词间距，CSS有专属属性。letter-spacing控制单个字符之间距离，word-spacing控制单词间距，text-indent设置段落首行缩进。比起手动插入空格实体，这类属性维护起来更方便，修改一个参数就能统一作用于整个页面。
早年写页面，空表格单元格习惯塞入 撑起单元格高度，不然表格边框塌陷，高度不正常。现在依靠CSS border-collapse和empty-cells就能处理，不一定非要插入实体字符。不过维护老旧项目代码的时候，看到页面里的 不要直接删除，先测试表格会不会变形。
简单总结，HTML里空格分两类。一类是文本内容本身自带的空格，英文单词之间、数字单位之间，普通空格或者 都可以，看是否需要禁止换行。另一类是视觉层面的元素间距，按钮、区块之间留白，交给CSS处理。分清这两种场景，就不会反复敲空格，然后困惑页面渲染效果不对。