text-indent 用 em 最稳妥，2em ≈ 两个汉字宽度且随字体缩放；需语义归位标题/引文/列表并单独重置缩进；justify 对中文无效，须配 text-justify: inter-character 与 lang="zh"。
直接用 text-indent 是最稳妥的起点，但长文章里光靠它容易翻车——缩进值不随字体变化、小屏下缩进过小、引用段落和标题混在一起没区分，这些才是真实痛点。
text-indent 单位选 em 还是 px？
优先用 em，不是因为“更专业”，而是它能随字体大小线性缩放。比如正文字体从 16px 缩到 14px（移动端），2em 自动从 32px 变成 28px，视觉节奏基本保持住；而 30px 固定值在小屏上可能只剩一个汉字宽度，首行缩进几乎看不出来。
-
em对应当前元素的font-size，中文排版中2em≈ 两个汉字宽度，够用且健壮 - 避免用
%，它基于容器宽度，段落宽度一变，缩进就飘 - 如果必须用像素（如设计稿强约束），至少加媒体查询：
@media (max-width: 600px) { p { text-indent: 20px; } }
如何让标题、引文、列表不被统一缩进误伤？
全局写 p { text-indent: 2em; } 看似省事，实际会把 <h2></h2>、<blockquote></blockquote>、<li> 全套进去——前提是它们被错误地写成了 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 包裹。真正该做的是语义归位 + 类控制。
- 标题不用
p套，直接用<h2></h2>、<h3></h3>，并显式重置：h2, h3 { text-indent: 0; } - 引文用
<blockquote></blockquote>，再单独设样式：blockquote { margin-left: 1.5em; padding-left: 1em; border-left: 2px solid #ccc; } - 列表项（
<li>）默认不响应text-indent，但若用了display: block或自定义块级容器，就得加.list-item { text-indent: 0; }
长段落末行对齐失效？justify 不是万能解药
text-align: justify 在中文段落里基本没反应，这不是你代码写错了，是浏览器默认只在空格、标点等 Unicode 断行点插入弹性间距，汉字之间没有断点。强行开 justify 只会让末行孤零零左对齐，还可能拉大字间距破坏阅读流。
立即学习“前端免费学习笔记（深入）”；
- 真要两端对齐，必须配
text-justify: inter-character，且lang="zh"要设在或最近的块级父容器上 - Safari 对
text-justify支持不稳定，上线前务必实机测试 - 短段落（text-align-last: justify
富文本导入后缩进混乱怎么快速定位？
CMS 或编辑器导出的 HTML 常混着内联 style="text-indent: 2em;"、 、<div style="margin-left: 20px">，这些和你的 CSS 规则打架，<code>text-indent 值可能被覆盖或叠加。
- 打开浏览器开发者工具，选中段落，看
Computed面板里的text-indent实际值，再点开Styles查哪条规则生效 - 重点排查：
!important内联样式、高权重选择器（如body p:nth-child(2n)）、以及<pre class="brush:php;toolbar:false;"></pre>标签——它会禁用自动换行，让缩进看起来“错位” - 临时清理法：在调试时加一条强制重置
p[style] { text-indent: inherit !important; }，先剥离内联干扰
最麻烦的永远不是怎么缩进，而是缩进之后要不要留白、留多少、跟前后元素的 margin 如何协同。长文章里，text-indent 和 margin-bottom 的组合比单点调优重要得多——一个没对齐，整页节奏就垮了。
