html默认压缩连续空白符，需用 或white-space css属性保留空格；少量固定空隙用 ，排版布局优先css的margin/padding/text-indent等。
HTML 中空格不显示？用 或 CSS 控制
HTML 默认会把连续的空白字符（空格、换行、制表符）压缩成一个空格，且开头结尾的空格直接忽略。这不是 bug，是规范行为——所以直接敲空格键，页面上根本看不出来。
常见错误现象：<p>Hello world</p> 渲染出来还是 Hello world，中间只有一格；<div> text </div> 开头结尾空格全消失。
- 想保留多个连续空格：用
<p>Hello world</p> - 想让整块文本按源码缩进显示：给容器加
white-space: pre或pre-wrap，例如<pre class="brush:php;toolbar:false;"> line1\n line2</pre> - 纯排版需要留空：优先用 CSS 的
margin/padding，比塞一堆
和普通空格的区别在哪？
是 HTML 实体，浏览器把它当“不可折行的字符”处理，不会被压缩，也不会在换行时断开。普通空格是空白符，受 white-space 属性控制。
立即学习“前端免费学习笔记（深入）”；
使用场景：适合少量、明确需要的空隙，比如单位前留空（100 px）、姓名中间固定空格（张 三）。别用它对齐文字或做布局——容易在不同字体/缩放下错位。
-
- 复制含
- 和
用 CSS 处理空格更灵活的三个时机
当空格需求不是“单个字符级”，而是涉及对齐、缩进、响应式时，CSS 才是正解。HTML 语义负责结构，样式负责呈现。
- 段落首行缩进两个字：用
text-indent: 2em，别手动敲两个 - 列表项之间加空隙：改
margin-bottom，而不是在每个<li>结尾加 - 代码块或配置项需保留原始缩进：用
<pre class="brush:php;toolbar:false;"><code></code> 组合 + <code>white-space: pre</code>，避免实体转义出错</pre>
移动端和可访问性里，空格要特别小心
屏幕阅读器对 的朗读行为不统一：有的跳过，有的读作“空格”，有的甚至卡顿。而 CSS 控制的空白不影响语义，更安全。
性能影响极小，但可维护性差——满屏 让人分不清哪是内容哪是格式补丁。尤其协作开发时，别人很难判断那个 是有意为之还是手误。
真正难的不是怎么输空格，是怎么判断该用 HTML 实体、CSS 还是干脆重构结构。比如“用户名后加空格再显示状态图标”，其实更适合用 display: inline-flex 加 gap，而不是拼字符串。
