text-indent 是实现段落首行缩进最直接的 css 属性，作用于 block 元素首行，推荐用 em 单位（如 2em），避免 ch、px 或 rem；需注意 display 类型、样式覆盖及中文字体宽度差异。
用 text-indent 是最直接的方式
HTML 本身不提供段落首字缩进的语义标签，必须靠 CSS 控制。绝大多数场景下，text-indent 就是你要找的属性，它作用于块级元素（比如 <p></p>），只缩进第一行开头。
注意：它缩的是“水平距离”，不是“字符数”。浏览器里一个中文字符宽度约等于 1em，所以设 text-indent: 2em 通常能实现两个汉字的视觉缩进效果。
- 值推荐用
em单位（相对字体大小），比px更适应不同字号和缩放 - 不要用
text-indent: 2ch试图精确卡两个字符——ch单位在中文字体下行为不稳定，Chrome 和 Firefox 渲染差异明显 - 如果段落内有
<span></span>或<strong></strong>等内联元素，text-indent不影响它们的位置，只推第一行文字整体
遇到首行缩进失效？先检查这些
常见失效不是代码写错，而是被其他样式覆盖或元素类型不对。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<p></p>被设了display: inline或display: flex——text-indent只对display: block或display: table-cell生效 - 父容器设置了
text-align: justify且内容太短，导致首行实际没换行，缩进“看不见” - CSS 优先级问题：比如某全局样式写了
p { text-indent: 0 }，把你局部设置覆盖掉了，用浏览器开发者工具检查计算样式（Computed → text-indent）确认真实值 - 用了
margin-left误以为是缩进——那是整段左移，不是首行缩进，会破坏对齐
想让缩进严格对应两个汉字？得加点兼容处理
纯靠 text-indent: 2em 在小字号（如 12px）下可能略宽，大字号（如 24px）下又略窄，因为中文字体的 em 并非严格等宽。如果设计稿要求像素级一致，可以：
- 对已知字体（如
"PingFang SC", "Microsoft YaHei"）做实测：在目标字号下量一个汉字宽度，再乘以 2，写死为text-indent: 32px类似值（仅限固定字体+固定字号场景） - 避免用
rem或视口单位（vw），它们会随根字体或屏幕变，破坏字符数感知 - 别尝试用伪元素（
::first-letter）模拟缩进——它只能选中第一个字符，无法控制“前两个字符”的间距
移动端和可访问性要注意什么
缩进只是视觉辅助，不影响语义。但有两个现实约束：
- iOS Safari 对小于
1.2em的text-indent渲染偏弱，建议最低设1.3em，否则小屏上看不出缩进 - 屏幕阅读器完全忽略
text-indent，所以不能靠它传递信息（比如“这是引文”），该加aria-label或语义化标签还是得加 - 如果用户开启了“减少动画/减少运动”偏好，部分系统会连带禁用某些 CSS 效果，但
text-indent不受影响，放心用
text-indent: 2em 加上字体声明（比如 font-family: "Noto Sans CJK SC", sans-serif）基本够用。真正麻烦的是当设计要求“首字下沉+后续缩进”或者“段首图标+缩进”时，text-indent 就得配合 float 或 grid 手动布局，那已经不是单纯缩进的问题了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
