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;
}

六、兼容性参考

结语

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

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

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