直接敲空格键不管用，因为HTML解析阶段会将连续空格、制表符、换行符统一压缩为单个空格，这是规范行为而非bug；需用 、<pre>标签或white-space CSS属性主动干预。
直接敲空格键为什么不管用
HTML 会把连续的空格、制表符、换行全部压缩成一个空格，无论你在代码里打 10 个空格还是回车 5 行，浏览器渲染出来都只算 1 个空格。这不是 bug，是规范行为 —— 浏览器只关心语义结构，不保留源码排版。
所以： 不是“多打几次空格”的替代品，而是唯一能稳定输出单个不可换行空格的实体；<br> 不是“换行”，而是强制插入一个换行点；<pre> 不是“美化代码”，而是告诉浏览器：“这段内容里的空格和换行，请原样显示”。
-
;不能省，写成&nbps;或 都无效 - 连续多个
-
<br>是自闭合标签，没有</br>，写错会触发 HTML 解析警告
什么时候该用 <pre> 而不是
如果你要显示一段有缩进、对齐、多空格的文本（比如代码片段、诗歌、ASCII 艺术），<pre> 是最简单可靠的方案。它让浏览器放弃空格压缩逻辑，原样渲染所有空白字符。
但注意：<pre> 默认使用等宽字体，且自带上下外边距，如果只是想在普通段落里加两格缩进，用它反而破坏排版一致性。
立即学习“前端免费学习笔记（深入）”；
- 适合：
<pre>for i in range(10):<br> print(i)</pre> - 不适合：
<pre>作者： 张三</pre>—— 这里用 CSS 更干净 - 若需微调
<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>、<aside>）则会被正确解析。
- 误用
text-align或flex - 用
<br>分隔标题和正文 —— 应该用margin-top或语义化包裹 - 复制粘贴全角空格（中文空格）当解决方案 —— 它虽能显示多个，但属于 hack，字体切换后宽度突变
