css中的text-indent属性怎么用

# CSS中的text-indent属性怎么用 ## 一、text-indent属性概述 `text-indent`是CSS中用于控制文本块首行缩进的属性，主要作用于块级元素（如`<p>`、`<div>`等）。该属性通过指定缩进长度，可以实现类似中文段落首行空两格的排版效果。 **基本语法**： ```css selector { text-indent: length | percentage | inherit; } 

二、属性值详解

1. 固定长度值

最常用的方式，支持所有CSS长度单位：

p { text-indent: 2em; /* 相对单位（推荐） */ text-indent: 20px; /* 绝对单位 */ } 

• em单位基于当前字体大小（1em = 1个字体高度）
• 负值可实现悬挂缩进效果

2. 百分比值

基于父元素的宽度计算缩进：

div { text-indent: 10%; } 

3. 全局值

p { text-indent: inherit; /* 继承父元素值 */ text-indent: initial; /* 重置为默认值0 */ } 

三、实际应用场景

1. 中文段落排版

article p { text-indent: 2em; /* 实现首行空两格 */ margin-bottom: 1.5em; } 

2. 列表项悬挂缩进

ul li { text-indent: -1em; /* 首行向左突出 */ padding-left: 1em; /* 保持后续行对齐 */ } 

3. 特殊排版效果

.poem { text-indent: -3em; padding-left: 3em; font-style: italic; } 

四、注意事项

1. 继承特性：

   • 该属性会被子元素继承
   • 表格单元格（<td>）默认不继承

2. 响应式设计：

   /* 移动端减小缩进 */ @media (max-width: 768px) { p { text-indent: 1em; } } 

3. 与其它属性的配合：

   • 与direction: rtl配合时，缩进方向会改变
   • 不影响display: inline元素

4. 浏览器差异：

   • 旧版IE对百分比计算有差异
   • 部分浏览器在<button>元素上表现不一致

五、进阶技巧

1. 多列布局中的缩进

.multicol { column-count: 3; } .multicol p { text-indent: 2em; } 

2. 结合伪元素

p.special::first-line { text-indent: 0; /* 取消首行缩进 */ } 

3. 动画效果

@keyframes indent { from { text-indent: -100%; } to { text-indent: 0; } } .animate { animation: indent 2s; } 

六、兼容性参考

浏览器	支持版本
Chrome	1.0+
Firefox	1.0+
Safari	1.0+
Edge	12+
IE	3.0+

结语

text-indent是文本排版的基础属性，合理使用可以： - 提升段落可读性 - 创建专业印刷效果 - 实现创意布局

建议在项目中使用相对单位（如em）以保证响应式效果，同时注意测试不同语言的排版需求。 “`

注：本文约850字，采用Markdown格式编写，包含代码示例和结构化内容。实际字数可能因显示环境略有差异。