最省事且复用性强的缩进方案是使用容器类名如 .article p { text-indent: 2em; }，避免全局污染和第三方样式覆盖；需适配表格、flex等非块级上下文，统一用 padding-left 替代，并通过 2em 保证跨设备视觉一致性。
全局统一设 p 的 text-indent 最省事但要防覆盖
直接写 p { text-indent: 2em; } 是复用性最强的起点，所有段落自动生效。但它极易被后续样式破坏：比如富文本编辑器导出的 HTML 常带 p { text-indent: 0 !important; }，或者某个组件库的 CSS 里写了 .card p { text-indent: 0; }。
真正能稳定复用的写法是加一层容器类名，例如：.article p { text-indent: 2em; }。这样既避免污染全局，又能在多个页面中通过复用 .article 类批量控制。
- 别依赖浏览器默认的
p标签语义去“猜”缩进——它根本没默认值 - 如果项目已用 CSS-in-JS 或 scoped style（如 Vue 的
<style scoped></style>），记得把text-indent规则写在同作用域下，否则会被隔离失效 - 用
@layer（如果支持）把基础排版规则提至底层，防止第三方样式意外覆盖
text-indent 复用时为什么表格里、Flex 里总失效
不是你漏写了样式，而是 text-indent 在非标准块格式化上下文里本就不工作。表格单元格（td）、Flex item、Grid item 默认不生成“首行盒”，text-indent 就像对空气发号施令。
此时复用的关键是「场景适配」：保留同一套缩进逻辑，但换实现方式。
- 对
td、th：统一用td, th { padding-left: 2em; }，不依赖首行语义，兼容性拉满 - 对 Flex 容器内的段落：显式重置
display: block并设width: 100%，再加text-indent；但更推荐直接用padding-left，省去布局退化风险 - 若需导出 PDF 或对接印刷系统，必须保
text-indent语义，则用包裹<div style="text-indent: 2em;"></div>，而非硬改表格结构
如何让缩进规则在不同字体、字号、DPI 下都“看起来像两字宽”
复用不是复制粘贴一行代码，而是确保它在各种环境下行为一致。2em 是目前唯一能跨设备保持视觉比例的单位：它随 font-size 等比缩放，16px 字号下 ≈ 32px，24px 下 ≈ 48px，始终接近两个汉字宽度。
用 px 或 % 会立刻破功：
-
32px：高 DPI 屏或 zoom=150% 时缩进显得过窄 -
2%：在 320px 宽的手机屏上只剩 ~6px，连一个汉字都塞不下 -
2rem：一旦根元素font-size被夜间模式、可访问性设置动态修改，缩进就跳变
若用等宽字体（如 Consolas），可试 2ch，但注意 IE 完全不支持，且多数中文字体中 1ch 远小于一个汉字宽度。
复用缩进样式时最容易被忽略的“例外处理”点
真正难的不是写对 text-indent: 2em，而是记住哪些地方**不该缩进**——这些例外不显式声明，复用就会翻车。
常见必须拦截的场景：
- 首段：
.article p:first-of-type { text-indent: 0; margin-top: 0; }（出版惯例+避免顶部空隙） - 引用块：
blockquote p { text-indent: -1em; padding-left: 1em; }（负缩进 + 左内边距防溢出） - 标题类段落：
p.title, p.subtitle { text-indent: 0; }（别指望:not()多层嵌套，优先加明确类名） - 富文本插入的段落：
.content p[data-source="wysiwyg"] { text-indent: 0; }（很多编辑器自带缩进，叠加后过量）
调试时打开开发者工具，直接看目标 p 的 Computed 面板里的 text-indent 值和 display 类型——值不是 2em？说明被覆盖；display 不是 block？说明布局上下文不对。这两个检查点比反复改 CSS 快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
