当前位置：首页 > 文章列表 > 文章 > 前端 > CSStext-indent属性用于设置文本首行的缩进。它通常用于段落（<p>）中，使第一行文字向右缩进一定距离。基本语法：text-indent:值;常见值：长度值：如20px、1em等。百分比：基于当前容器的宽度计算，如50%。inherit：继承父元素的缩进值。none：不缩进（默认值）。示例：p{text-indent:2em;/*首行缩进两个字符宽度*/}div{text-i

CSStext-indent属性用于设置文本首行的缩进。它通常用于段落（<p>）中，使第一行文字向右缩进一定距离。基本语法：text-indent:值;常见值：长度值：如20px、1em等。百分比：基于当前容器的宽度计算，如50%。inherit：继承父元素的缩进值。none：不缩进（默认值）。示例：p{text-indent:2em;/首行缩进两个字符宽度/}div{text-i

2025-10-29 19:36:59 0浏览收藏

**CSS文字缩进：text-indent属性详解及SEO优化指南** 想让你的中文网页更美观，符合百度SEO规范？`text-indent`属性是关键！本文深入解析CSS `text-indent`属性的用法，教你轻松实现段落首行缩进，提升用户体验。`text-indent`常用于设置文本首行缩进，例如`2em`实现首行空两字符的常见中文排版效果。支持`px`、`em`、`%`等单位，其中`em`单位因其良好的适配性而被推荐。此外，`text-indent`还可设负值，配合`padding`实现独特的悬挂缩进效果。但要注意，`text-indent`仅对块级元素有效，不会影响内联元素。掌握`text-indent`，让你的网页排版更专业，更易被百度收录！

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

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

在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 简单实用，特别适合中文段落排版。

以上就是《CSStext-indent属性用于设置文本首行的缩进。它通常用于段落（

）中，使第一行文字向右缩进一定距离。基本语法：text-indent:值;常见值：长度值：如20px、1em等。百分比：基于当前容器的宽度计算，如50%。inherit：继承父元素的缩进值。none：不缩进（默认值）。示例：p{text-indent:2em;/*首行缩进两个字符宽度*/}div{text-indent:50px;/*首行缩进50像素*/}.article{text-indent:10%;/*首行缩进父容器宽度的10%*/}注意事项：text-indent只影响首行的缩进。如果你想缩进所有行，可以使用padding-left或者margin-left来实现。在某些浏览器中，text-indent可能会影响换行和排版效果，需测试兼容性。如果你是初学者，建议从`》的详细内容，更多关于CSS,块级元素,text-indent,em单位,首行缩进的资料请关注golang学习网公众号！

CSS 块级元素 text-indent em单位首行缩进