text-indent 应全局用 p { text-indent: 2em; } 统一控制，避免内联样式、类名或  ；禁用 padding-left 代替；flex 容器中需设 display: block 确保生效。

text-indent 一行够用，别套 class 或内联 style

直接写 p { text-indent: 2em; } 就能全局生效，比每个 <p class="indent"></p> 或 <p style="text-indent: 2em"></p> 省下大量重复代码。类名和内联样式只在需要差异化控制时才有意义——比如引用段落要反向缩进、标题不缩进、首段例外等。纯正文统一缩进，CSS 规则越少，维护成本越低，浏览器解析也越快。

别用   或多个空格模拟缩进

写   这里是段落 看似省事，但问题一堆：

• 复制粘贴时容易丢空格或转成普通空格，缩进消失
• 屏幕阅读器会把   当作可读字符朗读，影响无障碍体验
• 换字体、改字号、切响应式断点后，视觉缩进量完全不可控
• HTML 源码里混入语义无关的空白符，污染结构

它不是“精简”，是偷懒埋雷。

避免 padding-left 代替 text-indent

用 p { padding-left: 2em; } 看起来也缩了，但本质不同：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• padding-left 推动整块 <p></p>，第二行也会离左边界 2em，破坏中文段落规范
• 缩进值不随字体大小自适应（除非用 em，但逻辑错位）
• 和栅格系统、flex 容器容易冲突，尤其 justify-content: center 下会偏移失准
• 若段落带背景色或边框，padding 产生的空白会显形，text-indent 不会

Flex/Grid 里缩进失效？先确认 display 类型

如果 p 在 display: flex 容器里没缩进，不是 text-indent 失效，而是 p 默认变成 flex item，脱离了块级格式化上下文。解决方式很直接：

• 给 p 显式设 display: block（推荐）
• 或者用 margin-left 替代（仅当真需整体右移）
• 别指望靠父容器加 text-align: justify 带出缩进——它不自动触发 text-indent

最稳的验证方式：打开开发者工具 → 查 Computed → 确认 display 是 block，且 text-indent 最终值非零。缩进看似简单，真正卡住人的永远是渲染上下文那层隐性规则。

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