text-indent是唯一语义正确、原生支持首行缩进的手段，但仅对块级元素生效；失效主因包括元素非块级、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖或white-space干扰，推荐用2em单位并配合开发者工具验证computed值。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，直接写 p { text-indent: 2em; } 就能生效——但前提是它真在起作用，而不是被布局、单位或样式覆盖悄悄屏蔽了。
为什么加了 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 该用 em 还是 px
优先用 2em，原因很实在：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
em是相对于当前字体大小的单位，字号放大时缩进同步变宽，适配阅读习惯 -
px固定死在32px或20px，字号调大后缩进就显得太小，用户 zoom 页面时易错位 - 避免用
%：它基于包含块宽度，窄屏下缩进可能过大（比如2%在320px宽度下仅6.4px，远不够两字符） -
rem理论上可行，但依赖html根元素字体设置，若项目中动态改过font-size（如夜间模式），缩进会意外跳变
中文场景下，2ch 更贴近单字宽度语义，但 IE 不支持，且部分中文字体里 1ch 远小于一个汉字，稳妥起见仍推荐 2em。
Flex/Grid 容器里缩进失效怎么办
这不是 bug，是格式化上下文变更的自然结果：
- 给
<p>显式加align-self: flex-start（Flex 场景） - 确保
<p>的width不为auto，否则可能退化为内联行为 - 更干净的做法：把缩进逻辑交给父容器的
padding-left，段落自身保持纯内容流 - 若必须保留在子元素上，可临时用
margin-left+display: inline-block强制触发块格式化上下文，但会破坏语义
真正要注意的其实是缩进单位和上下文的关系——em 看的是当前元素字体大小，rem 看根字体，ch 看 “0” 字宽。同一段 CSS 在不同嵌套层级里表现可能不一样，调的时候得盯着实际渲染结果看，别光信代码里写的数字。
最常被忽略的一点：首段通常不该缩进，也常需去掉顶部 margin。p:first-of-type { margin-top: 0; text-indent: 0; } 这一行，漏掉就会让整页阅读起点错位。
