元素保持代码缩进并避免多余空白
" /> 元素保持代码缩进并避免多余空白
" /></p> </p><p>`<pre class="brush:php;toolbar:false;">` 元素默认保留所有空白符（空格、制表符、换行），若 html 源码中 `<pre class="brush:php;toolbar:false;">` 标签内存在缩进空格，浏览器会将其渲染为可见空白，导致代码整体右偏；解决方法是清除 `<pre class="brush:php;toolbar:false;">` 标签内部的首行缩进和行前空格。</p><p><pre> 元素专为<strong>预格式化文本</strong>设计，其核心特性是忠实还原源码中的空白结构——这是优势，也是初学者最容易踩坑的地方。问题本质并非 CSS 控制失效，而是 HTML 编写方式影响了内容的实际输入。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a>
<p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><h3>✅ 正确写法：让 <pre> 内容「顶格写」</h3><p>确保 <pre> 开始标签的 > 与第一行代码之间<strong>无换行、无空格、无缩进</strong>，且每行代码开头不带额外空格（缩进应由代码逻辑本身决定，而非 HTML 缩进）：</p><pre class="brush:php;toolbar:false;"><!-- ✅ 推荐：内容紧贴 <pre> 标签，无首行缩进 -->
<pre>.container {
display: flex;
justify-content: center;
align-items: center;
}</pre>
❌ 错误示例（会导致左侧多出大量空白）：
<!-- ❌ 危险：HTML 缩进被当作内容渲染 -->
<div class="code-block">
<pre>
.container {
display: flex;
justify-content: center;
}</pre>
</div>此时 <pre> 内部的换行+4个空格会被原样显示，造成整体左偏移。
⚠️ 补充说明：white-space 的适用场景
- white-space: pre;（默认）→ 保留所有空白，换行生效，不自动折行
- white-space: pre-line; → 合并连续空格，但将换行符转为空格，破坏缩进结构 → 这正是你观察到“缩进消失”的原因
- white-space: pre-wrap; → 保留空格与换行，同时允许长行自动折行（适合响应式代码块，但需配合 overflow-x: auto 防止溢出）
如需兼顾缩进与容器宽度适配，可组合使用：
<pre style="white-space: pre-wrap; overflow-x: auto; margin: 0; padding: 12px; background: #f5f5f5; font-family: monospace;">
.container {
display: flex;
justify-content: center;
}
</pre>? 小技巧：用 CSS 重置 <pre> 默认外边距
部分浏览器会给 <pre> 添加默认 margin，若嵌入 Flex 容器后未左对齐，检查并重置：
pre {
margin: 0;
/* 可选：添加字体、背景增强可读性 */
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
background-color: #f8f9fa;
padding: 1rem;
border-radius: 4px;
}总结：<pre> 的“格式错乱”几乎总是源于 HTML 源码中无意混入的空白字符。删掉 <pre> 标签内的首行缩进和行首空格，是最直接、最可靠、最符合语义的解法。 不要依赖 white-space 属性去“修正”结构问题，而应从内容源头保证干净。
">
