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