text-indent仅缩进首行，整段缩进应使用padding-left；多级缩进宜用语义化列表配合CSS继承；富文本中缩进失效需通过Computed Styles排查覆盖规则。
text-indent 只缩首行，不是整段缩进
很多人以为 text-indent 能让整个段落“向右挪”，其实它只作用于第一行开头。后续行依然从左边界对齐，除非你手动换行或用其他方式干预。这在中文排版里容易误判——看着像“整段缩了”，其实是首行空两格 + 其余行自然折行的结果。
如果你真需要整段文字整体右移（比如引用块、代码说明、嵌套列表项），text-indent 就不对路了，得换方案。
整段缩进该用 padding-left，别碰 margin-left
对 <p></p> 或 <div> 设置 <code>padding-left 是最干净的整段缩进方式：
-
padding-left把内容区域整体右推，文字、内联元素、子元素都跟着动，视觉上就是“整段缩进” - 避免用
margin-left：它会把整个块级盒子往右顶，可能破坏父容器的栅格对齐（比如 Flex 容器里的<p></p>会错位） - 如果同时用了
text-indent和padding-left，注意两者叠加效果——首行会比其余行多缩一次，容易过量 - 响应式场景下，可用
rem或em单位，比如padding-left: 1.5rem，随根字体缩放
多级缩进别靠嵌套 <div>，用语义化列表
<p>遇到“一级缩进 → 二级缩进 → 三级缩进”的需求（比如文档大纲、配置说明树），硬写三层 <code><div><div><div> 是反模式：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>结构膨胀，DOM 层级深，可访问性差</li>
<li>缩进值难复用，改一处要全局搜</li>
<li>屏幕阅读器无法识别层级意图</li>
</ul>
<p>正确做法是用语义化列表配合 CSS：</p>
<pre class='brush:php;toolbar:false;'><ol class="nested-list">
<li>一级项</li>
<li>一级项
<ol>
<li>二级项</li>
<li>二级项
<ol><li>三级项</li></ol>
</li>
</ol>
</li>
</ol></pre>
<p>再配 CSS 控制每层缩进量：<code>.nested-list ol { padding-left: 1.5em; }。这样缩进可继承、可覆盖、语义清晰。
富文本输出里缩进失效？先查 computed styles
从 CMS、编辑器（如 TinyMCE、Quill）导出的 HTML 常含内联样式或冲突规则，导致你写的 text-indent 或 padding-left 不生效。最快定位方式：
- 打开浏览器开发者工具，选中目标段落
- 切到 Computed 标签页，搜索
text-indent或padding-left - 看最终值是不是
0px，如果不是，点右侧箭头展开，看哪条规则把它覆盖了（常见是!important或高权重选择器） - 特别注意：如果父容器是
display: flex或display: grid，text-indent默认失效，这时只能靠padding-left或 wrapper<span></span>
真正麻烦的是混合来源 HTML：既有 style="text-indent: 2em"，又有外部 CSS 的 .content p { padding-left: 20px }，还有编辑器注入的 margin: 0。上线前必须用 Computed 验证每一层，不能只信源码。
