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