text-indent 首行缩进属性

最后更新：2026-09-13

text-indent text-indent 首行缩进属性

text-indent 属性用于设置块级元素首行文本的缩进距离，常见于文章段落的首行缩进排版。它只影响元素的第一行内容，对后续行无效。取值可以是固定长度（如 2em）或百分比（相对于包含块的宽度），也支持负值实现悬挂缩进效果。

text-indent: <length> | <percentage>;

值	类型	描述
`<length>`	类型	首行缩进固定值
`<percentage>`	类型	相对包含块宽度的百分比

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
text-indent	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： 中文排版中通常使用 2em 实现"首行缩进两个字符"的效果，em 单位会随字号自动调整。

注意： text-indent 只对块级元素生效，行内元素（如 span）不会产生缩进效果。

Qtext-indent 的百分比是相对于谁的宽度？

A相对于元素包含块（父元素）的内容宽度计算，而不是自身宽度或字号。例如父容器 400px、text-indent: 10% 时首行缩进 40px。em 单位则相对当前元素字号计算。

Qtext-indent 可以和其他缩进方式一起用吗？

A可以。text-indent 只作用于首行，配合 padding-left 可实现整段缩进，配合负值 + padding-left 可实现悬挂缩进（首行向左突出）。两者互不冲突。

Q首行缩进两个字符怎么设置？

A中文排版标准写法是 text-indent: 2em，em 相对当前字号，字号变化时缩进自动跟随，始终等于两个汉字宽度。不要用固定 px，字号改变时会比例失调。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。