CSStext-indent属性用于设置文本首行的缩进。它通常用于段落(<p>)中,使第一行文字向右缩进一定距离。基本语法:text-indent:值;常见值:长度值:如20px、1em等。百分比:基于当前容器的宽度计算,如50%。inherit:继承父元素的缩进值。none:不缩进(默认值)。示例:p{text-indent:2em;/*首行缩进两个字符宽度*/}div{text-i
时间:2025-10-29 19:36:59 370浏览 收藏
**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学习网公众号!
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
319 收藏
-
394 收藏
-
258 收藏
-
484 收藏
-
402 收藏
-
334 收藏
-
460 收藏
-
160 收藏
-
189 收藏
-
140 收藏
-
310 收藏
-
275 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习