text-indent 文本缩进

基本语法

text-indent: 缩进值;

常用单位

1. px - 像素

text-indent: 32px;

2. em - 字符单位(推荐)

text-indent: 2em;  /* 缩进2个字符 */

说明: em 表示当前元素字体大小的倍数

3. % - 百分比

text-indent: 20%;  /* 缩进容器宽度的20% */

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>text-indent 文本缩进</title>
  <style>
    body {
      font-size: 12px;
    }
    p {
      font-size: 20px;
    }
    /* em表示的是当前文字大小，2em即两个汉字的距离 */
    .title {
      /* 首行缩进为 2个字符大小 2*20=40px */
      text-indent: 2em;
    }
    .em {
      /* 行缩进为 2个字符大小 2 * 12=24px */
      text-indent: 2em;
    }
  </style>
</head>
<body>
  <p>艾编程，为每个互联网人提供高质量的终身学习平台</p>
  <p class="title">　　艾编程，为每个互联网人提供高质量的终身学习平台</p>
  <div class="em">艾编程，为每个互联网人提供高质量的终身学习平台</div>
</body>
</html>

首行缩进

中文排版中,通常首行缩进2个字符:

p {
  text-indent: 2em;
}

负值(悬挂缩进)

.hanging-indent {
  text-indent: -2em;
  padding-left: 2em;
}

不同单位的对比

/* px - 固定像素 */
.text-px {
  text-indent: 40px;
}

/* em - 相对字符数(推荐) */
.text-em {
  text-indent: 2em;  /* 2个字符 */
}

/* % - 相对容器宽度 */
.text-percent {
  text-indent: 5%;
}

实际应用

场景1: 文章段落

.article p {
  text-indent: 2em;
  line-height: 1.8;
  margin-bottom: 1em;
}

场景2: 无缩进

.no-indent {
  text-indent: 0;
}

场景3: 特殊缩进

/* 只缩进第一段 */
.article p:first-child {
  text-indent: 2em;
}

/* 其他段落不缩进 */
.article p:not(:first-child) {
  text-indent: 0;
}

场景4: 响应式缩进

/* 移动端 */
@media (max-width: 768px) {
  p {
    text-indent: 2em;
  }
}

/* 桌面端 */
@media (min-width: 769px) {
  p {
    text-indent: 0;  /* 桌面端不缩进 */
  }
}

注意事项

继承性: text-indent 会继承给子元素
块级元素: 只对块级元素生效
单位选择: 中文推荐使用 2em
行内元素: 对行内元素无效

学习要点

推荐单位: em (2em = 2个字符)
中文排版: 首行缩进 2em
单位: px, em, %
继承: 会继承给子元素
限制: 只对块级元素生效

css学习