当前位置:首页 > 文章列表 > 文章 > 前端 > 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学习网公众号!

GolangWebSocket多客户端连接管理教程GolangWebSocket多客户端连接管理教程
上一篇
GolangWebSocket多客户端连接管理教程
Golang环境配置实战指南
下一篇
Golang环境配置实战指南
查看更多
最新文章
// 获取聊天">
文章 · 前端   |  26分钟前  |  
// 获取聊天">让溢出内容的 div 滚动条默认定位到最底部,可以通过 JavaScript 动态设置 scrollTop 属性实现。以下是一个简单的实现方法:✅ 实现方式
// 获取聊天
257浏览 收藏
  • LB状态对象拆分方法详解
    文章 · 前端   |  26分钟前  |  
    LB状态对象拆分方法详解
    489浏览 收藏
  • 可选链操作符的作用是什么?
    文章 · 前端   |  30分钟前  |  
    可选链操作符的作用是什么?
    242浏览 收藏
  • CSS实现元素左右拉伸填满
    文章 · 前端   |  33分钟前  |  
    CSS实现元素左右拉伸填满
    293浏览 收藏
  • ToPrimitive 转换路径详解:原始类型转换规则解析
    文章 · 前端   |  36分钟前  |  
    ToPrimitive 转换路径详解:原始类型转换规则解析
    443浏览 收藏
  • FormData 与 Submit 事件实现无刷新表单提交
    文章 · 前端   |  40分钟前  |  
    FormData 与 Submit 事件实现无刷新表单提交
    295浏览 收藏
  • JavaScript类型转换规则详解
    文章 · 前端   |  46分钟前  |  
    JavaScript类型转换规则详解
    108浏览 收藏
  • IntersectionObserver 实现高性能懒加载列表
    文章 · 前端   |  47分钟前  |  
    IntersectionObserver 实现高性能懒加载列表
    138浏览 收藏
  • 优化BEM选择器权重,避免ID干扰技巧
    文章 · 前端   |  50分钟前  |  
    优化BEM选择器权重,避免ID干扰技巧
    473浏览 收藏
  • CSS不同状态标签展示内容不同怎么办?伪类与伪元素结合使用解析
    文章 · 前端   |  53分钟前  |  
    CSS不同状态标签展示内容不同怎么办?伪类与伪元素结合使用解析
    414浏览 收藏
  • 资料下载
    查看更多
    课程推荐
    查看更多
    AI推荐
    查看更多
    相关文章
    微信登录更方便
    • 密码登录
    • 注册账号
    登录即同意 用户协议隐私政策
    返回登录
    • 重置密码