标签保持代码缩进并避免多余空白？
" /> 标签保持代码缩进并避免多余空白？
" />
`
` 标签默认保留所有空白符（包括行首缩进），若源码中存在意外缩进，会导致渲染时整体偏移；解决方法是清理 html 中 `` 内容的行首空白，而非依赖 `white-space` 属性强行修正。在 HTML 中，
元素专为预格式化文本设计，其核心特性是：浏览器会原样渲染所有空格、制表符（Tab）和换行符。这使得它非常适合展示代码片段——但这也意味着：你写在 HTML 源码中的缩进，会被当作内容的一部分显示出来。例如，以下写法会导致左侧出现大量冗余空白：
.container { display: flex; justify-content: center; padding: 20px; }虽然代码逻辑清晰、可读性好，但
内容开头的换行 + 缩进（即第一行末尾的换行符，以及第二行开头的 4 个空格）会被完整渲染，造成整个代码块向右偏移，破坏与 Flexbox 容器左对齐的设计预期（如作业图示所示）。✅ 正确做法是：让
的起始标签与首行代码紧贴，消除行首不可见空白：.container { display: flex; justify-content: center; padding: 20px; }或者，若需在 HTML 中保持可读缩进，可采用「注释隔离」技巧（推荐用于复杂嵌套场景）：
.container { display: flex; justify-content: center; padding: 20px;⚠️ 注意事项：
- white-space: pre-line 或 pre-wrap 虽能改善换行处理，但无法自动剥离行首缩进——它们只是改变空白符的解析规则，而非删除源码中的空格；
- 不要依赖 CSS 强行重置 text-indent 或 margin-left 来“掩盖”缩进问题，这会破坏语义与可维护性；
- 若需高亮或交互功能，建议配合
标签使用：
，既语义正确，也便于后续集成 Prism.js 等语法高亮库。...总结：
的行为完全符合规范，问题根源在于 HTML 源码格式本身。养成「紧贴书写」的习惯——即
标签后立即跟首行内容（无换行、无空格）——是确保代码精准对齐、符合设计稿要求的最简、最可靠方案。
