text-indent: 2em 是首选，因其专为首行缩进设计、语义清晰、兼容ie8+，2em随字号自适应，视觉等效于两汉字；错误用法如20px或2ch存在适配与兼容问题。
直接用 text-indent: 2em，别加空格、别用 padding-left，但必须确保 <p></p> 是块级元素且没被布局干扰。
为什么 text-indent: 2em 是首选
它专为“首行缩进”设计，语义清晰、浏览器原生支持、所有现代浏览器（含 IE8+）都兼容。2em 表示“当前字号的两倍宽度”，在中文字体下视觉上最接近两个汉字，且随用户缩放、系统字体调整自动适配。
常见错误是写成 text-indent: 20px 或 text-indent: 2ch：
• 20px 在高 DPI 屏或用户放大页面时会明显偏小或过大
• 2ch 理论上更准，但 Safari 仍不支持，Chrome 120+ 才稳定，上线前得查 caniuse
<p></p> 加了 text-indent 却没反应？先查这几点
不是 CSS 写错了，而是渲染条件断了：
• 开发者工具里看 Computed 标签页，确认 display 是 block（不是 inline 或 inline-block）
• 父容器用了 display: flex 或 display: grid，且没触发 BFC —— 此时 text-indent 可能被对齐逻辑覆盖
• 段落开头是 <img>、<svg></svg> 这类内联替换元素，缩进发生在该元素左侧，视觉上等于没动
• 富文本编辑器输出或第三方 CSS 库写了 p { text-indent: 0 !important }
• white-space: nowrap 或 white-space: pre 破坏了换行，“首行”概念失效
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
表格里、Flex 容器里、带图标段落怎么处理
这些场景下硬套 text-indent 容易翻车：
• <td> 中缩进常失效：默认 <code>display: table-cell，且 text-align: center 会把缩进后的文字再拉回。稳妥做法是 padding-left: 2em，不依赖行盒
• Flex/Grid 容器里的 <p></p>：优先给父容器加 padding-left: 2em；若必须保留语义，可给 <p></p> 加 align-self: flex-start（Flex）或显式设 display: block
• 段落开头有图标（如 <svg></svg> 或 <span class="icon"></span>）：text-indent 不作用于第一个非文本节点。解决方法是把图标挪到文字后面，或用 ::before 伪元素插入
容易被忽略的边界情况
真正影响线上表现的不是“怎么写”，而是上下文：
• <pre class="brush:php;toolbar:false;"></pre> 或 <code> 块里如果嵌在 <p></p> 中，外层 text-indent 会泄露进去，导致代码第一行多缩进一截——需显式重置：pre, code { text-indent: 0; }
• iOS Safari 用户双指放大时，rem 和 em 缩进可能突变，这是渲染引擎对可访问性的妥协，不是 bug
• 负值（如 text-indent: -1em）可用于悬挂缩进，但要配合 padding-left 防文字裁切，且 direction: rtl 下方向自动翻转，无需改值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
