css文字缩进text-indent使用方法

text-indent用于设置文本首行缩进，常用2em实现中文段落首行空两字符，支持px、em、%等单位，推荐em适配性好；可设负值配合padding实现悬挂缩进；仅对块级元素有效，不影响内联元素。

在CSS中，text-indent 属性用于设置文本第一行的缩进。常用于段落首行空出两个字符位置，符合中文排版习惯。

基本语法

text-indent: length | % | inherit;

• length：使用 px、em、rem 等单位设置固定缩进，如 2em
• %：相对于父元素宽度的百分比缩进
• inherit：继承父元素的 text-indent 值

常用使用方式

最常见的是为段落设置首行缩进2个中文字符：

p {
  text-indent: 2em;
}

em 单位推荐用于 text-indent，因为 1em 约等于一个中文字符宽度，2em 就是两个汉字的缩进，适配性好。

负缩进与特殊用途

text-indent 也支持负值，可用于实现“悬挂缩进”效果：

hanging-paragraph {
  text-indent: -2em;
  padding-left: 2em;
}

这种技巧常用于列表项或引用内容，让第一行突出显示。

注意事项

• 只影响块级元素的第一行文本，对内联元素无效
• 如果元素没有换行，缩进可能不可见
• 结合 direction 和 writing-mode 使用时，行为会随文本方向变化
• 不要在 inline 元素上使用，应作用于 p、div、h1-h6 等 block 元素

基本上就这些，text-indent 简单实用，特别适合中文段落排版。