HTML空格怎么输入？代码空格技巧【指南】

HTML中空格看似简单，实则暗藏玄机：浏览器默认会合并连续空白、忽略首尾空格，直接敲空格根本无法显示预期效果； 作为不换行空格可强制保留且防折行，而 等普通实体仍会被合并；真正专业的做法是跳出硬编码空格的思维陷阱——优先用CSS（如padding、text-indent、letter-spacing或white-space: pre-wrap）实现语义清晰、响应灵活、无障碍友好的排版控制，既避免HTML臃肿，又大幅降低调试难度。

HTML里敲空格为啥不显示

浏览器默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，再把首尾空白全忽略。所以直接敲十个 或写十个空格，页面上只看到一个。

 和 的区别在哪

 是不换行空格（non-breaking space），它不会被浏览器合并，也不会在行尾被折断； 只是空格字符的十进制数字实体，行为和普通空格完全一样，照样会被合并。

• 要“强制保留且不断行”，用 
• 要“语义化表示一个空格字符”（比如在pre外模拟等宽排版）， 没实际意义，不如直接敲空格
• 批量空格建议用 ，但别堆二十个——可读性差，也影响语义

CSS替代方案更可控

靠实体硬塞空格是权宜之计，真正需要对齐、缩进、间距，应该用CSS。比如：

span.indent { padding-left: 2em; }
div.spaced { letter-spacing: 0.1em; }

这样既避免HTML里塞一堆 ，又方便统一调整、响应式适配、无障碍阅读支持。

• margin/padding管元素间/内距离
• text-indent专用于首行缩进
• letter-spacing微调字间距，但别设负值过大，影响可读性

pre和white-space: pre-wrap能保留所有空格

如果真要原样输出带空格的文本（比如代码片段、诗歌排版），用

</code>标签最省事；或者给普通标签加<code>white-space: pre-wrap</code>样式：</p>
<pre class="brush:php;toolbar:false"><p style="white-space: pre-wrap">  这里有两个空格开头  
下一行也有缩进</p>