CSS 文本缩进

text-indent 属性用于设置段落或块级元素的首行缩进。

语法

css 
text-indent: [值];

取值

  • 长度值：px、em、rem、pt 等
  • 百分比值：相对于父元素宽度的百分比
  • 负值：可以创建悬挂缩进效果

示例

css 
/* 基本缩进 */
.indent {
  text-indent: 2em;
}

/* 百分比缩进 */
.percent-indent {
  text-indent: 10%;
}

/* 悬挂缩进 */
.hanging-indent {
  text-indent: -2em;
  padding-left: 2em;
}

/* 零缩进 */
.no-indent {
  text-indent: 0;
}

实际应用

  1. 正文段落：在中文排版中，通常首行缩进2个字符
  2. 引用文本：对引用段落设置特殊的缩进效果
  3. 列表项：创建悬挂缩进的列表样式
  4. 特殊排版：根据设计需求创建各种缩进效果

最佳实践

  1. 使用相对单位：优先使用 em、rem 等相对单位，使缩进与字体大小保持一致
  2. 考虑语言习惯：中文通常需要首行缩进，而英文排版中首行缩进较少使用
  3. 悬挂缩进：当需要突出项目符号或编号时，使用悬挂缩进可以提高可读性
  4. 避免与其他样式冲突：注意 text-indent 与 padding、margin 等属性的配合使用
  5. 响应式设计：在不同屏幕尺寸下，可能需要调整缩进值