text-indent 是唯一语义正确且原生支持的首行缩进方式，失效主因是 display 非 block、父容器为 flex/grid、首行为替换元素、高权重重置或 white-space 禁用换行。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，其他方式（如 padding-left、margin-left、多个 ）要么破坏对齐，要么不可访问，要么响应式失效。
为什么加了 text-indent 却没缩进
不是代码写错了，而是渲染条件被破坏：
-
p被设成display: inline或inline-block—— 浏览器不识别“首行”概念 - 父容器用了
display: flex或display: grid，p的块级盒行为被覆盖 - 段落开头是
<img>、<svg>等内联替换元素，缩进发生在该元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }（常见于富文本编辑器输出） - 用了
white-space: nowrap或white-space: pre—— 换行被禁用，“首行”失去意义
最快验证方式：打开开发者工具 → 查看目标 p 的 Computed 标签页 → 确认 display 是 block，且 text-indent 的最终值不是 0。
text-indent 该用什么单位才靠谱
单位选错，缩进就“看起来不对”，尤其在系统缩放、DPI 变化或夜间模式下：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
2em：最稳妥。1em ≈ 当前font-size，缩进随字号放大/缩小，中文下视觉接近两字符宽度 -
2ch：语义更准（1ch ≈ 字符 “0” 宽度），但 IE 不支持，且多数中文字体里 1ch 远小于一个汉字 -
32px或20px：仅限字体大小绝对固定的静态页；系统缩放时会失准 -
2%：按父容器宽度计算，和字体无关——窄屏下缩进可能只剩几像素，完全不够 -
2rem：若项目用 JS 动态改html { font-size }（如夜间模式），缩进会意外跳变
别用负值或百分比兼容 IE8；它对 text-indent: -1em 和 text-indent: 5% 支持极不稳定，尤其配合 direction: rtl 时容易错位。
缩进和段间距别混用，margin 才管段距
text-indent 只影响首行，margin 才控制段与段之间的空隙，二者职责分明：
- 用
margin-bottom: 1.2em控制段后距，不影响首行定位 - 避免只设
margin-top：相邻段落外边距会合并，导致段距忽大忽小 - 首段通常不该缩进，也常需去掉顶部 margin：
p:first-of-type { margin-top: 0; text-indent: 0; } - 别用
padding-left模拟缩进：它会让整段左移，破坏text-align: justify对齐，小屏易溢出
真正麻烦的是混合场景：比如富文本编辑器导出的 HTML 同时含内联样式、 和 text-indent，这时候缩进逻辑互相覆盖，上线前必须用开发者工具逐层检查 computed styles。
