标签保留代码缩进并避免多余空白？
" /> 标签保留代码缩进并避免多余空白？
" /></p></p><p>`<pre class="brush:php;toolbar:false;">` 标签默认保留所有空白符（包括行首空格和制表符），若 html 源码中 `<pre class="brush:php;toolbar:false;">` 内容前存在缩进，浏览器会将其渲染为可见空白；解决方法是确保 `<pre class="brush:php;toolbar:false;">` 标签内容**顶格书写**，不带任何前置空格或换行缩进。</p><p>在 HTML 中，<pre>（preformatted text）元素的设计初衷就是<strong>原样呈现文本中的空格、换行与制表符</strong>。其默认 CSS 样式为 white-space: pre，这意味着：</p><ul><li>所有空格、制表符（\t）、换行符（\n）均被保留并渲染；</li><li>文本不会自动换行（除非遇到 <br> 或显式换行）；</li><li>行首缩进（如你在编辑器中为对齐代码而添加的空格）会被当作有效内容显示。</li></ul><p>这正是你遇到问题的根本原因：<br />
✅ 你希望保留代码块内部的缩进（如 CSS 的嵌套结构、属性缩进）；<br />
❌ 但 HTML 源码中 <pre> 标签内的内容本身被写在了缩进的代码层级下（例如放在 <div> 内且换行后加了 4 个空格），导致这些“外层缩进”也被 <pre> 一并渲染，使整段代码向右偏移。</p><h3>✅ 正确写法：内容必须顶格、无前置空白</h3><pre class="brush:php;toolbar:false;"><!-- ❌ 错误：pre 内容被缩进了（常见于美化 HTML 结构时） -->
<div class="code-container">
<pre>
.container {
display: flex;
justify-content: center;
}
</pre>
</div>
上述写法中，.container { 前的换行 + 多个空格会被 <pre> 渲染为实际空白，造成左侧多余缩进。
<!-- ✅ 正确：pre 标签内容严格顶格，无换行/空格干扰 -->
<div class="code-container">
<pre>.container {
display: flex;
justify-content: center;
}</pre>
</div>? 小技巧：可将 <pre> 标签本身不换行地紧贴父标签闭合符书写，或使用注释消除换行影响（但顶格仍是最清晰可靠的方式）：<div class="code-container"><!-- --><pre>.container { display: flex; }</pre><!-- --></div>
⚠️ 关于 white-space 的常见误区
你尝试过 white-space: pre-line，它确实会折叠连续空格、合并换行，但会丢弃所有行首缩进（因为 pre-line 将行首空格视为空白前导并裁剪），因此 CSS 层级缩进全部消失——这不是 bug，而是该值的标准行为。
其他值对比简表：
| white-space 值 | 保留空格 | 保留换行 | 折叠多余空格 | 保留行首缩进 | 适用场景 |
|---|---|---|---|---|---|
| pre（默认） | ✅ | ✅ | ❌ | ✅ | 纯文本/代码块（需完全控制格式） |
| pre-line | ❌ | ✅ | ✅ | ❌ | 普通段落文本（含换行但不需缩进） |
| pre-wrap | ✅ | ✅ | ❌ | ✅ | 长代码行需自动换行时的折中选择 |
如需在保留缩进的同时支持长行自动换行，可改用：
<pre style="white-space: pre-wrap; overflow-x: auto;">/* 你的代码 */</pre>
✅ 最终建议（面向初学者）
- 编写 <pre> 时，关闭编辑器自动缩进功能，或手动删除 <pre> 开始标签与第一行代码之间的所有空白；
- 使用 <code> 标签包裹 <pre> 内容以增强语义（<pre><code>...</code></pre>），便于样式与无障碍访问；
- 若需统一代码样式，配合 CSS 设置字体（如 font-family: 'SFMono-Regular', Consolas, monospace;）和背景色提升可读性。
只要源码中 <pre> 的内容真正“顶格”，你就能完美复现作业要求的左对齐、缩进规范的代码展示效果。
