直接敲空格键不管用，因为html解析阶段会将连续空格、制表符、换行符统一压缩为单个空格，这是规范行为而非bug；需用 、标签或white-space css属性主动干预。

直接敲空格键为什么不管用

HTML 会把连续的空格、制表符、换行全部压缩成一个空格，无论你在代码里打 10 个空格还是回车 5 行，浏览器渲染出来都只算 1 个空格。这不是 bug，是规范行为 —— 浏览器只关心语义结构，不保留源码排版。

所以：  不是“多打几次空格”的替代品，而是唯一能稳定输出单个不可换行空格的实体；<br> 不是“换行”，而是强制插入一个换行点；<pre class="brush:php;toolbar:false;"></pre> 不是“美化代码”，而是告诉浏览器：“这段内容里的空格和换行，请原样显示”。

•   必须小写，末尾分号 ; 不能省，写成 &nbps; 或 &nbsp 都无效
• 连续多个   会挤在同一行，不会自动折行 —— 这就是它叫 “no-break space” 的原因
• <br> 是自闭合标签，没有 ，写错会触发 HTML 解析警告

什么时候该用

 而不是  

如果你要显示一段有缩进、对齐、多空格的文本（比如代码片段、诗歌、ASCII 艺术），<pre class="brush:php;toolbar:false;"></pre> 是最简单可靠的方案。它让浏览器放弃空格压缩逻辑，原样渲染所有空白字符。

但注意：<pre class="brush:php;toolbar:false;"></pre> 默认使用等宽字体，且自带上下外边距，如果只是想在普通段落里加两格缩进，用它反而破坏排版一致性。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 适合：<pre class="brush:php;toolbar:false;">for i in range(10):&lt;br&gt;    print(i)</pre>
• 不适合：<pre class="brush:php;toolbar:false;">作者：  张三</pre> —— 这里用 CSS 更干净
• 若需微调 <pre class="brush:php;toolbar:false;"></pre> 样式，必须重置 font-family 和 margin，否则易与页面其他文字风格冲突

CSS margin/padding 比   更可控

真正做布局时，  和 <br> 是临时补丁，margin 和 padding 才是正解。比如想让两个按钮之间留出 12px 空隙，写 12 个   不仅难维护，还无法响应式适配屏幕宽度。

关键区别在于：CSS 控制的是元素之间的距离，而   插入的是文本节点内的不可见字符 —— 后者会参与行内流布局，受字体大小、行高影响，宽度不稳定。

• 按钮间距：用 button + button { margin-left: 12px; }，而不是在 HTML 里塞               
• 段落首行缩进：用 p { text-indent: 2em; }，而非开头硬加 4 个  
• 避免混用：同一处既写   又写 margin，容易导致间距叠加或冲突

别踩这些初学者典型坑

新手常把空格问题当成“怎么多打几个空格”的技术问题，其实本质是没分清“内容”和“表现”。HTML 负责描述内容结构，CSS 负责控制视觉表现。强行用   做布局，就像用胶带粘家具来调高度 —— 能用，但一碰就散。

最容易被忽略的一点：搜索引擎和屏幕阅读器会把大量   当作无意义字符处理，可能影响 SEO 和可访问性。而 margin 和语义化标签（如 <section></section>、<aside></aside>）则会被正确解析。

• 误用   对齐表格单元格 —— 应该用 text-align 或 flex
• 用 <br> 分隔标题和正文 —— 应该用 margin-top 或语义化包裹
• 复制粘贴全角空格（中文空格）当解决方案 —— 它虽能显示多个，但属于 hack，字体切换后宽度突变

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！