text-indent是实现首行缩进的标准方法，仅对块级元素生效，推荐用2em单位以适配字体变化，避免使用空格或px值，注意flex、direction等布局干扰。
text-indent 实现首行缩进的正确用法
直接用 text-indent 是最标准、最可靠的方式，但“两个汉字”不能简单写成 2em 或 2ch —— 浏览器对 ch 单位的支持不一致，而 em 依赖当前字体的宽度，不同中文字体（如微软雅黑、宋体、思源黑体）的汉字宽高比差异明显，实际缩进可能偏大或偏小。
推荐做法是用 2em 作为起点，再结合字体特性微调：
-
text-indent: 2em在多数默认中文字体下视觉上接近两个汉字宽度，兼容性好，所有现代浏览器都支持 - 若页面指定了等宽中文字体（如
"Fira Code", "Cascadia Code"），可尝试text-indent: 4ch（因一个中文字符通常占 2ch） - 避免用
px值（如40px），它无法随字号缩放，响应式场景下会失效
为什么不要用空格或 模拟缩进
用 或全角空格（ ）塞在段落开头，看似简单，但会破坏语义和可访问性：屏幕阅读器会读出这些空白字符，复制粘贴时也会带入无意义空格，SEO 也可能误判内容结构。
更严重的是维护问题：
- 缩进量改了就得逐个替换 HTML 内容，无法统一控制
- 响应式断点切换字号后，空格数量无法自动适配
- 富文本编辑器（如 TinyMCE、Quill）常自动过滤或转义连续
遇到 line-height 或 margin 干扰时怎么排查
有时设置了 text-indent 却没效果，大概率是以下原因：
- 元素不是块级元素（如
span默认为 inline），需加display: block或display: inline-block - 父容器设置了
overflow: hidden且缩进超出容器左边界，会被裁剪（可临时加padding-left观察是否恢复） - CSS 优先级被更高权重的规则覆盖（比如某全局
p { text-indent: 0 }），用浏览器开发者工具检查计算样式 -
direction: rtl或writing-mode: vertical-rl会改变text-indent的作用方向，需配合text-align调整
移动端适配与 font-size 变化的影响
当使用 rem 或媒体查询动态调整 font-size 时，text-indent: 2em 会自动按比例缩放——这是优势，但前提是根字体大小变化逻辑合理。常见陷阱：
- 用
vw直接设html { font-size: 4vw }时，小屏下字号骤减，2em缩进可能窄于一个汉字，建议加最小限制：html { font-size: max(16px, 4vw) } - iOS Safari 对
text-indent在flex容器内子元素上的渲染偶有延迟，可加transform: translateZ(0)强制硬件加速 - 微信内置浏览器（X5 内核）对
text-indent在position: absolute元素上支持不稳定，尽量避免在这种场景下使用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
