<pre>缩进“消失”是因浏览器默认渲染规则与CSS未适配所致，需配合white-space、转义和<code>嵌套三要素才能正确保缩进。
为什么 <pre> 里的缩进会“消失”
不是代码写错了，而是浏览器默认把 <pre> 里的空格当普通文本渲染——它保留换行和空格字面量，但不阻止 CSS 样式重置字体大小、行高、外边距，更不会自动处理横向溢出。你看到的“扁平化”，其实是内容被压缩、截断或换行错乱导致的视觉错觉。
<pre> 必须配 CSS 才能保缩进
只写 <pre><code><div> <p>test</p></div></code></pre> 没用。必须加以下至少一项 CSS：
-
white-space: pre-wrap：保留所有空格与换行，且允许自动换行（最常用） -
white-space: pre-line：合并连续空格，但保留换行（适合带语义的代码注释） -
overflow-x: auto：外层容器加该样式，防止宽代码撑破布局 -
font-family: monospace：确保空格宽度一致，避免等宽失效
推荐组合：white-space: pre-wrap; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace;
HTML 实体和转义别漏掉
<pre> 不解析标签，但如果你真想在其中展示 HTML 片段（比如教人写 <div>），必须手动转义：
立即学习“前端免费学习笔记（深入）”；
-
<→ -
>→> -
&→&
漏掉 就会触发浏览器解析，<code><div> 变成真实 DOM 节点，缩进层级直接崩坏。别依赖编辑器自动转义——它不一定生效，尤其粘贴时。
嵌套 <code> 标签不是可选项
语义上，<pre> 表示“预格式化文本”，<code> 表示“一段计算机代码”。W3C 明确建议嵌套使用：<pre><code>...</code></pre>。好处有三：
- 屏幕阅读器能正确识别为代码块，提升无障碍支持
- 语法高亮工具（如 Prism、highlight.js）通常只作用于
<code>内部 - 避免 CSS 误命中其他
<pre>（比如日志输出块）
单独用 <pre> 看似省事，后期加高亮或做 SSR 渲染时容易踩坑。
真正麻烦的从来不是写几行缩进，而是当别人复制你的代码块到 Markdown、Notion 或 Slack 里，空格全变成单个空格或直接丢弃——所以从第一行开始，就得把 white-space、转义、嵌套这三件事钉死。
