text-indent仅对块级元素生效，应使用em单位并避免与justify、flex等布局冲突，常见问题包括元素类型错误、父容器样式覆盖及富文本干扰。

text-indent 设置首行缩进的正确写法

直接用 text-indent 就行，但必须注意它只对块级元素（如 p、div）生效，对 span 或内联元素无效。

常见错误是给 a 或 span 加 text-indent，结果没反应——不是语法错，是元素类型不支持。

• 推荐单位用 em（相对字体大小），比如 text-indent: 2em 表示缩进两个中文字符宽度
• 避免用 px，尤其在响应式页面里，字号变化后缩进会失衡
• 负值合法，可用于悬挂缩进（如参考文献格式），但要小心内容被裁切

为什么有时候 text-indent 看不见效果

最常踩的坑是父容器设置了 text-align: justify 或用了弹性布局（display: flex），导致子段落被强制拉伸或重排，text-indent 被覆盖或忽略。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

另一个隐蔽原因是段落里开头有空格、  或内联标签（如 <strong>第一句</strong>），浏览器可能把缩进应用在不可见字符上，视觉上“没动”。

• 检查是否意外给 p 加了 display: inline 或 display: inline-block
• 用浏览器开发者工具看 computed 样式，确认 text-indent 值确实被应用且未被覆盖
• 临时加个 background-color: #eee 到段落，能看清实际内容区域是否真在缩进

兼容性与特殊场景处理

text-indent 在所有现代浏览器中都稳定支持，IE8+ 也没问题。真正麻烦的是某些富文本编辑器导出的 HTML，或 CMS 自动生成的段落，里面混着 style 属性、class 冲突，甚至内联 text-align。

• 如果缩进在移动端异常，先查是否有 zoom、transform: scale() 类样式影响了计算
• 配合 direction: rtl 使用时，text-indent 会作用于“逻辑首行”，不是视觉右侧，需额外测试
• 不要指望 text-indent 对伪元素 ::first-line 生效——它只作用于整个块容器的第一行文本，不是选择器

段落缩进看着简单，但实际常被布局模式、继承样式和编辑器输出干扰；最稳妥的做法，是给需要缩进的 p 单独加 class（比如 .indent），并用 !important 防止被 CMS 模板覆盖——这不是最佳实践，但在真实项目里，比追查二十层 CSS 来得快。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！