CSS中的首行缩进：text-indent

text-indent 是 CSS 中的一个样式属性，用于设置文本段落的首行缩进。它常用于排版美化，特别是在中文网页中，通常会使用 text-indent: 2em 来实现类似传统印刷书籍中“段首两个字空格”的效果。

---

🔍 基本语法

text-indent: length | % | inherit | initial;

---

📌 可用值说明

值类型	示例	含义
长度值（length）	2em, 10px, 0.5cm	指定首行缩进的具体长度
百分比（%）	5%	相对于包含块（通常是父容器）宽度的百分比进行缩进
inherit	inherit	继承自父元素的 text-indent 值
initial	initial	使用默认值（即不缩进）

---

✅ 常见使用场景

示例 1：基本使用（段首缩进两个汉字）

p {
  text-indent: 2em;
}

这段代码会让每个 <p> 段落的第一行文字向右缩进两个字符宽度，这是中文排版中非常常见的做法。

---

示例 2：取消缩进

如果你不想让某一段落缩进，可以设置为：

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

---

示例 3：负值实现悬挂缩进

你还可以使用负值来实现“悬挂缩进”效果（即首行突出于段落左侧）：

h2 {
  text-indent: -0.5em;
  padding-left: 0.5em;
}

这在设计标题或列表项时有时会用到。

---

⚠️ 注意事项

• text-indent 只作用于块级元素（如 div, p, h1~h6），对内联元素（如 span）无效。
• 如果元素设置了 overflow: hidden 或 display: inline-block 等布局方式，缩进可能不会生效。
• 缩进的是段落的第一行，后续换行不会缩进。

---

🧩 实际效果对比

HTML

<p>这是一个普通的段落。text-indent 设置为 2em 后，首行会自动缩进两个汉字的位置。</p>

CSS

p {
  text-indent: 2em;
}

效果

这是一个普通的段落。text-indent 设置为 2em 后，首行会自动缩进两个汉字的位置。

---

🧠 小技巧：em 和 px 的区别

• 1em = 当前字体大小（font-size）
  • 如果 font-size: 16px，那么 2em = 32px
• px 是固定像素单位
  • 20px 始终是 20 像素，不管字体大小如何变化

因此，在需要响应式设计时，推荐使用 em 单位，以保持缩进与字体大小比例一致。

---

✅ 总结

属性名	用途	推荐值
text-indent	控制段落首行缩进	2em（中文常用）
支持单位	px, em, %, rem 等	推荐使用 em
是否继承	✅ 可继承	可控性好
应用对象	块级元素	如 p, div, h1~h6