text-indent 失效主因是首行含内联替换元素、Flex/Grid 布局干扰或样式覆盖；应优先用 2em 缩进，避免 px/rem/%，首段需重置，段间距用 margin 控制。
text-indent 值设对了但缩进位置偏移
不是代码写错了，而是 text-indent 的生效位置被干扰了。最常见的是段落开头有 <img>、<svg> 或 emoji 这类内联替换元素（replaced inline elements），浏览器会把缩进应用在该元素左侧，文字本身没动，视觉上就是“缩了等于没缩”。验证方法：打开开发者工具 → 查看目标 <p> 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值非 0。
- 若首行是图标或图片，改用
padding-left: 2em+text-align: justify组合，虽语义弱一点，但视觉对齐可控 - 避免在
<p>内部混用direction: rtl或含双向文本的片段，否则text-indent可能向右偏移 - 富文本编辑器导出的 HTML 常带内联样式，比如
style="text-indent: 0px"，需用p[style] { text-indent: 2em !important; }覆盖
中文两字符缩进该用 2em 还是 2ch
2em 是更稳妥的选择。1em ≈ 当前 font-size，缩进随字号放大/缩小，中文下视觉接近两个汉字宽度；而 2ch 虽语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 远小于一个汉字，实际缩进不足。
- 别用
32px或20px：系统缩放、DPI 变化时会失准 - 慎用
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变 - 绝对不用百分比（如
2%）：窄屏下缩进可能只剩几像素，完全不够两字符
Flex/Grid 容器里 <p> 缩进失效
这不是 bug，是格式化上下文变更的自然结果。text-indent 仅对块级盒（block formatting context）内的首行生效，而 display: flex 或 display: grid 父容器会让子 <p> 失去传统块级盒行为——它的 text-indent 计算被忽略。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 临时方案：给
<p>加display: block并确保父容器未强制覆盖其盒模型 - 更可靠做法：换思路，用
padding-left: 2em模拟缩进，它对任何display类型都有效 - 若必须保留语义和 flex 布局，可把
<p>包一层<div>，让外层负责布局，内层负责排版
首段不该缩进却缩了，或段间距错乱
中文排版惯例是首段不缩进，但所有段落都套用统一 text-indent: 2em 就会破例。同时，段间距该由 margin 控制，不是 padding —— 后者会撑大容器高度，还可能和 border 或 flex 对齐冲突。
立即学习“前端免费学习笔记（深入）”；
- 首段重置：
p:first-of-type { margin-top: 0; text-indent: 0; } - 段间距统一用
margin：p { margin: 1.2em 0; }，避免用padding模拟 - 若段落内含
vertical-align: middle的内联元素（如图标），line-height会影响其垂直基准线，需额外测试
真正麻烦的不是写一行 text-indent，而是缩进与 text-align、父容器布局、首行内容类型、字体缩放之间的耦合关系——漏掉任一条件，位置就偏了。
