优先选 2em，因em基于当前字体大小，缩进随字号和系统设置自适应，避免rem动态根字号导致跳变、px固定失衡、%值过小等问题。
text-indent 用 em 还是 rem？优先选 2em
中文排版要求首行缩进两个字符，text-indent: 2em 是最贴合阅读习惯的写法。em 基于当前 p 元素的 font-size，字号放大时缩进同步变宽，用户 zoom 页面或开启系统大字体模式也不会错位。
rem 看似全局统一，但一旦项目中动态修改了 html 根元素的 font-size（比如夜间模式切换、可访问性设置），缩进就会意外跳变；px 固定死在某个像素值，小屏下可能只剩 16px，远不够两字宽度；% 更危险——2% 在 320px 宽度容器里仅 6.4px，几乎不可见。
常见错误是直接写 text-indent: 32px 或 text-indent: 2rem，上线后在 iPad mini 或折叠屏上缩进突然“消失”，就是单位选错了。
小屏缩进要减量，别只靠媒体查询硬切
移动端屏幕窄，2em 缩进在 14px 字体下仅 28px，视觉上已显局促；若字体更小（如某些新闻 App 默认 12px），缩进甚至不到 24px，和普通空格差不多。这时候光靠 @media (max-width: 600px) 把 text-indent 改成 1.5em 不够稳妥。
立即学习“前端免费学习笔记（深入）”；
更实际的做法是结合字体响应：
- 用
clamp(1.2em, 1.8em, 2em)让缩进随视口平滑过渡，避免阶梯式突变 - 若项目已用
vw或vh控制正文字号（如font-size: clamp(14px, 4vw, 18px)），缩进直接复用同一逻辑：text-indent: clamp(1.2em, 3.6vw, 2em) - 真遇到极窄屏（比如竖屏 iPhone SE），可加一条兜底：
@media (max-width: 375px) { p { text-indent: 1em; } }
富文本输出的段落常不缩进，先检查 display 和 computed styles
从 CMS、编辑器（如 TinyMCE、Quill）导出的 HTML，经常出现 <p></p> 没缩进的情况。不是 CSS 写错了，而是这些内容常被包裹在 div 或 section 里，且外层有 display: inline-block 或 overflow: hidden ——这两者都会让 text-indent 失效。
排查步骤很直接：
- 打开浏览器开发者工具，选中段落元素，看
Computed面板里text-indent是否为生效值（不是0或unset） - 检查该
p的display是否仍是block；若被重置为inline或flex，text-indent就不工作 - 确认父容器没设
text-align: justify+overflow: hidden组合，这种组合在某些 Safari 版本里会吞掉首行缩进
临时修复可以加 p { display: block !important; }，但根本解法是统一富文本输出的容器语义，比如强制用 <p class="rich-text-paragraph"></p> 并配专属样式。
首段不缩进 + 顶部无 margin 是中文网页标配
中文排版惯例：文章标题下第一个段落不缩进，且顶部不留空。但默认 p 有 margin-top，text-indent 又对首段生效，结果就是标题和首段之间多了一截空白，首行还多缩了两字符。
必须显式重置：
p:first-of-type { text-indent: 0; margin-top: 0; }- 如果首段前面还有
h1、h2或figure，建议改用p:not(:first-of-type)或更稳的.article-content > p:not(:first-child) - 注意：若首段被
float或position: absolute脱离文档流，:first-of-type选择器会失效，得靠 class 控制
真正容易被忽略的是「首段之后紧接列表或代码块」的场景——这时 p + ul 或 p + pre 的间距可能被 margin-bottom 和 margin-top 折叠掉，缩进逻辑反而成了次要问题。
