当前位置:首页 > 文章列表 > 文章 > 前端 > 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
**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 属性用于设置文本第一行的缩进。常用于段落首行空出两个字符位置,符合中文排版习惯。
基本语法
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 元素
以上就是《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学习网公众号!
GolangWebSocket多客户端连接管理教程
- 上一篇
- GolangWebSocket多客户端连接管理教程
- 下一篇
- Golang环境配置实战指南
-
- 文章 · 前端 | 20分钟前 |
- HTML渐变文字实现方法详解
- 339浏览 收藏
-
- 文章 · 前端 | 22分钟前 |
- JavaScript函数重载模拟与参数类型判断方法
- 142浏览 收藏
-
// 获取聊天">

