text-indent: 2em是最推荐的首行缩进方案，因其缩进值等于当前元素font-size的两倍，能随字号等比缩放、保持约两个中文字符宽度，兼容性好且不受布局模式影响。
text-indent: 2em 是最直接有效的做法
缩进随字体大小变化，本质是要求缩进值与当前 font-size 成比例。text-indent 支持 em 单位，而 1em 就等于当前元素的 font-size 值，所以 text-indent: 2em 天然满足“两字宽”且随字号缩放的需求。
常见错误是写成 text-indent: 32px 或 text-indent: 20px——这些固定像素值在用户放大浏览器、系统启用高 DPI 缩放、或富文本动态改字号时，缩进会明显变窄，视觉上只剩半字甚至更少。
-
2em在默认 16px 字号下 ≈ 32px，刚好容纳两个标准中文字 - 用户把字号调到 24px 时，缩进自动变为 48px，仍保持两字宽
- 配合
html { font-size: clamp(16px, 4vw, 20px); }这类响应式根字号时，2em依然稳定生效
为什么不能用 % 或 ch 单位替代 em
% 基于父容器宽度，不是字体大小。例如在 320px 宽的移动端，text-indent: 2% 仅生成 6.4px 缩进，远不够一个汉字；而 ch 单位虽理论上对应字符宽度，但中文字体对 ch 的支持不一致（如微软雅黑、思源黑体对 ch 的解析偏差可达 ±15%），实测易偏大或偏小。
更麻烦的是：若段落嵌套在 flex 或 grid 容器里，ch 可能完全失效或被重置为 0，而 em 不受布局模式影响。
- 避免
text-indent: 2%：窄屏下缩进不可靠，宽屏下可能过大 - 慎用
text-indent: 2ch：仅在明确使用等宽中文字体（如"Fira Code"）且已实测通过时才考虑 -
rem看似合理，但依赖html根元素的font-size；若项目中用 JS 动态切换夜间模式并修改根字号，rem缩进会跳变，em更稳
Flex/Grid 容器中 text-indent 失效怎么办
这不是 bug，而是格式化上下文限制：text-indent 在 display: flex 或 display: grid 的子项上可能不触发首行缩进逻辑，尤其当 p 没有显式设 width 或 display: block 时。
此时别硬调 text-indent，换思路：
- 首选
padding-left: 2em：它不依赖“首行”语义，对任何块级子项都生效，视觉效果几乎一致 - 若必须保留
text-indent（如兼容打印样式），给p加display: block和width: 100%，强制其进入 BFC - 绝对不要用
margin-left替代——它会让整段左移，破坏text-align: justify对齐，也干扰 flex 主轴对齐
首段不缩进 + 缩进随字号变化，怎么一起搞定
首段（如标题下的导语）按出版惯例不该缩进，但又不能简单写 text-indent: 0 覆盖全局规则，否则会丢失响应式缩放能力。
正确做法是用选择器叠加，让缩进逻辑保持可继承性：
- 基础规则：
p { text-indent: 2em; } - 首段重置：
p:first-of-type { text-indent: 0; margin-top: 0; }——这里0是绝对值，但只作用于首段，不影响其他段落的2em缩放逻辑 - 如果段落包裹在
.article内，优先用.article p:first-child，避免被侧边栏、广告位里的p干扰
真正容易被忽略的是：缩进是否生效，得看计算样式里 text-indent 最终值是不是带单位的 em。有时全局 CSS 框架（如 Bootstrap）或编辑器输出的内联样式会悄悄覆盖掉你的 2em，上线前务必用开发者工具点开 “Computed” 标签页确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
