最轻量可控的 text-indent 复用方式是定义 .indent 类统一控制缩进量；避免全局 p 选择器污染，响应式需分层类覆盖，Flex/Grid 中失效时宜改用 padding-left 替代。
text-indent 本身不支持直接“复用”——它必须配合 CSS 类或选择器才能批量生效。硬写内联样式 style="text-indent: 2em" 每次都要重复，既难维护也不响应变化。
用类名统一控制缩进量
最轻量、最可控的复用方式：定义一个通用类，在需要缩进的 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 上加 class="indent"。
常见错误是把类名写成 .p-indent 或 .paragraph-indent——太长且语义冗余；.indent 简洁明确，也方便后续扩展（比如 .indent-sm、.indent-none）。
- 在 CSS 中声明：
.indent { text-indent: 2em; } - HTML 中使用：
<p class="indent">首行会缩进</p> - 若某段落不需要缩进，加
.indent-none { text-indent: 0 !important; }覆盖即可
避免用标签选择器全局污染
写 p { text-indent: 2em; } 看似省事，但极易引发意外缩进：
立即学习“前端免费学习笔记（深入）”；
- 富文本编辑器输出的
<p></p>可能嵌在<div contenteditable> 里，你无法控制其结构 <li>第三方组件（如评论框、表单提示）里的 <code><p></p>也会被强制缩进，破坏 UI 节奏 - 打印样式或暗色模式切换时，全局规则难以按需关闭
- 基础类保持固定值：
.indent { text-indent: 2em; } - 响应式类只覆盖必要断点：
@media (max-width: 768px) { .indent-mobile { text-indent: 1.5em; } } - HTML 中组合使用：
<p class="indent indent-mobile"></p>，靠层叠顺序生效 - 不推荐用
text-indent: 2%—— 它按容器宽度算，窄屏下可能缩进不足 1ch，视觉上等于没缩 - 统一用
padding-left替代：.indent-safe { padding-left: 2em; } - 它对
flex item、grid item、inline-block全部有效，且不依赖“首行”语义 - 若项目里大量存在这类场景，建议默认用
.indent-safe，仅在纯文档流段落中保留.indent
响应式缩进要单独抽离类
移动端缩进 2em 显得过大，但直接改 .indent 会影响桌面端。正确做法是分层控制：
Flex/Grid 容器中缩进失效时别硬扛
当 <p></p> 套在 display: flex 的卡片或导航栏里，text-indent 很大概率失效——这不是 bug，是格式化上下文切换导致的。
此时强行加 display: block 可能修复，但更稳的复用方案是换思路：
真正容易被忽略的是：缩进类是否和字体设置耦合。比如用了 text-indent: 2ch，但某些中文字体不支持 ch 单位（IE 和部分旧 Android WebView），结果整站缩进消失——这种兼容性陷阱，比写错单位更难排查。
