html中直接用空格缩进不可靠，因浏览器会合并连续空白字符；应使用css的text-indent实现首行缩进，整段偏移则用margin-left或padding-left，避免滥用 。

直接输入空格缩进段落为什么不可靠

HTML 会把连续的空白字符（包括空格、制表符、换行）合并成一个空格显示，所以你在源码里敲 4 个空格或按几次 Tab，浏览器最终只渲染出一个空格——根本达不到缩进效果。

更麻烦的是，这种写法会让 HTML 结构和视觉表现强耦合，一旦内容变动、编辑器自动清理空格、或者团队协作时编辑器设置不同，缩进就可能消失或错乱。

用 text-indent 实现首行缩进才是标准做法

CSS 的 text-indent 专为段落首行缩进设计，语义清晰、控制精准、兼容性好。它只影响第一行，不影响其他行或元素布局。

• text-indent 支持像素（2em）、相对单位（2em 最常用，适配字体大小）、百分比（5%）等写法
• 对 <p></p> 元素设 text-indent: 2em; 是中文排版最常见选择
• 注意：它不适用于 display: inline 元素，也不影响块级子元素的缩进

哪些情况不能用 text-indent？得换思路

如果需要整段（不止首行）向右偏移，比如引用块、侧边注释、缩进式列表，text-indent 就不管用了——它只动第一行。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

这时应该用 margin-left 或 padding-left：

• margin-left：适合整体位移且不希望影响内部行高或背景色延伸
• padding-left：适合需要背景色/边框随缩进一起延展的场景
• 避免混用：不要一边写 text-indent 一边又加 margin-left，容易叠加出意料之外的偏移

用   强行塞空格？真有人这么干，但很危险

  是非断行空格，确实能“钉住”一个空格不被合并，但它是内容层的 hack，不是样式层的控制。

问题很明显：

• 破坏语义：空格成了 DOM 节点，屏幕阅读器会读出来（虽然通常静音，但不可靠）
• 难以维护：缩进量改一次就得手动删/加一堆  
• 响应式失效：在小屏幕上，这些硬空格不会随字体缩放自适应，可能挤出横向滚动条

真正需要精确对齐（比如 ASCII 表格、代码注释对齐）时，才考虑 <pre class="brush:php;toolbar:false;"></pre> 或 white-space: pre，而不是滥用  。

缩进本质是样式问题，就该交给 CSS 处理；用空格、  或缩进字符强行“模拟”，等于把样式逻辑塞进 HTML 内容里——改起来费劲，看的人也懵。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！