如何正确使用 标签保持代码缩进并避免多余空白？ 第1张 标签保持代码缩进并避免多余空白？ " /> 标签保持代码缩进并避免多余空白？ " />

`

` 标签默认保留所有空白符（包括行首缩进），若源码中存在意外缩进，会导致渲染时整体偏移；解决方法是清理 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 源码格式本身。养成「紧贴书写」的习惯——即 
     标签后立即跟首行内容（无换行、无空格）——是确保代码精准对齐、符合设计稿要求的最简、最可靠方案。