如何正确使用元素保持代码缩进并避免多余空白-html教程-PHP中文网

如何正确使用 <pre class= 元素保持代码缩进并避免多余空白 " /> 元素保持代码缩进并避免多余空白 " />

` 元素默认保留所有空白符（空格、制表符、换行），若 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 防止溢出）
如需兼顾缩进与容器宽度适配，可组合使用：

							
								
								
									造次
									Liblib打造的AI原创IP视频创作社区
								
								下载 
							
						
.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 属性去“修正”结构问题，而应从内容源头保证干净。

如何正确使用 元素保持代码缩进并避免多余空白

✅ 正确写法：让 内容「顶格写」

⚠️ 补充说明：white-space 的适用场景

? 小技巧：用 CSS 重置 默认外边距

如何正确使用元素保持代码缩进并避免多余空白

✅ 正确写法：让
内容「顶格写」

? 小技巧：用 CSS 重置
默认外边距