html中空格会被浏览器自动合并，需用 、 、 实体或white-space css属性控制空白效果，关键在于根据语义和场景选择合适方案。
HTML 里直接敲空格键，浏览器会自动合并成一个空格——这不是“打不出来”，而是 HTML 的默认渲染行为。想保留多个空格、缩进或特殊空白效果，必须用 HTML 实体或 CSS 控制。
用 打不可折叠的普通空格
这是最常用也最容易踩坑的方式。 是 non-breaking space（不换行空格），浏览器不会把它和其他空格合并，也不会在行尾自动断开。
- 适合场景：按钮文字间加固定间距、表格中对齐、防止“100 元”被折成两行
- 注意：连打多个
- 别误写成
&nsbp;或 （缺分号）——后者会被浏览器忽略或报解析错误
<p>姓名：<span>张</span><code> </code><span>三</span></p>
用 和 控制更宽的空白
它们是语义更明确的空格实体，宽度由字体决定，但比 更“有单位感”：
立即学习“前端免费学习笔记（深入）”；
-
-
- 注意：不是所有字体都严格按此渲染，移动端或小字号下可能差异明显
<div>第一章<code> </code>引言</div>
用 white-space CSS 属性批量控制空格行为
当需要整块文本保留原始缩进和换行（比如代码片段、诗歌、日志输出），靠堆 不现实，该上 CSS：
-
white-space: pre—— 完全保留空格和换行，但不自动换行（超出容器也不折） -
white-space: pre-wrap—— 保留空格和换行，同时允许长单词/文本自动折行（最常用） -
white-space: pre-line—— 合并连续空格，但保留换行符（适合纯文本转 HTML）
<pre class="brush:php;toolbar:false;" style="white-space: pre-wrap"> 这里有两个空格开头
这里是四个空格 + 换行
编辑器里快速输入空格实体的技巧
手动敲 太慢，不同编辑器有对应捷径：
- VS Code：输入
&后触发 Emmet 补全，选spc→ - Sublime Text：安装插件 “HTML-CSS-Class-Completion”，支持
&+ Tab 补全常见实体 - WebStorm：启用 “Auto-insert” for HTML entities，在输入
&后自动提示 - 通用底线：别依赖复制粘贴——容易混入全角空格或零宽字符，导致样式异常或校验失败
真正难的不是“怎么打出空格”，而是判断该用实体还是 CSS、该保留还是压缩空白——多数布局问题，其实出在没想清楚这里。
