html中普通空格失效是因为浏览器默认合并连续空白字符并忽略首尾空白，这是规范行为而非bug；需用 、标签或white-space属性解决。
HTML里普通空格为什么会失效
因为浏览器默认会把连续的空白字符（空格、制表符、换行）合并成一个空格，且忽略首尾空白。你敲10个空格或回车，在页面上只显示1个空格——这不是bug，是HTML规范行为。
常见错误现象： 用多了导致排版错乱；用<pre class="brush:php;toolbar:false;"></pre>包裹纯文本却忘了保留原始缩进逻辑；在<div>里敲空格想对齐文字，结果完全没反应。
<ul>
<li>适用场景：需要精确控制单词间距、缩进、对齐，比如代码片段、诗歌排版、表格内微调</li>
<li>不适用场景：仅为了“让两段文字隔开一点”，应该用<code>margin或padding，而不是堆
会增加HTML体积，且不利于可访问性（屏幕阅读器可能读作“不间断空格”）用 实现单个不可折行空格
是HTML实体，代表“不间断空格”。它不会被浏览器合并，也不会在行尾被自动换行切开。
示例：防止“Mr. Smith”被拆成两行：
<p>Mr. Smith</p>
- 只能替代一个空格，要3个空格就得写3个
- 不能用于缩进整段文字——那样语义错误，且响应式下容易溢出
- 和CSS的
white-space: nowrap效果不同：nowrap作用于整块元素
用保留所有空白与换行
<pre class="brush:php;toolbar:false;"></pre>会让内部所有空格、制表符、换行原样渲染，适合代码块、ASCII艺术、日志输出等场景。
但要注意：它默认使用等宽字体，且会触发块级元素的默认外边距和滚动条（内容超宽时）。
- 配合CSS重置样式更可控：
pre { font-family: inherit; white-space: pre-wrap; margin: 0; } -
white-space: pre-wrap比纯<pre class="brush:php;toolbar:false;"></pre>更灵活：保留空白，但允许自动换行 - 不要把
<pre class="brush:php;toolbar:false;"></pre>当“万能空格工具”用在标题或按钮里——破坏语义，影响SEO和无障碍
CSS的white-space属性才是现代解法
比起硬塞HTML实体或滥用<pre class="brush:php;toolbar:false;"></pre>，用CSS控制空白行为更干净、可维护性更高。
关键取值：
-
white-space: pre→ 像<pre class="brush:php;toolbar:false;"></pre>一样保留所有空白，不换行 -
white-space: pre-wrap→ 保留空白，但允许换行（最常用） -
white-space: pre-line→ 合并空白，但保留换行符（适合带换行的富文本） -
white-space: break-spaces→ 新增标准，空格也能换行（Chrome 83+，Firefox 73+）
示例：让一段含多个空格的地址正常显示又可响应式换行：
<div style="white-space: pre-wrap">北京市 朝阳区 建国路87号</div>
注意：white-space会影响子元素，如果内部有<span></span>或链接，需额外处理换行逻辑。
真正难的不是“怎么加空格”，而是判断该用语义标记（如<pre class="brush:php;toolbar:false;"></pre>）、字符实体（ ），还是CSS行为控制——选错会导致后期改起来特别费劲，尤其在国际化或高DPI设备上空格宽度变化更明显。
