text-indent用于设置块级元素首行缩进，推荐使用2em实现中文首行缩进两个字符的效果，仅对块级元素有效，支持em、px等单位，建议用em以自适应字体大小，可通过p:not(:first-of-type)排除首段缩进，避免与margin/padding冲突，优于使用 等非语义化方式，符合结构与样式分离原则。
在网页排版中，为了让段落看起来更清晰、符合中文阅读习惯，通常需要设置首行缩进。CSS 提供了 text-indent 属性来实现这一效果，使用起来简单且兼容性好。
什么是 text-indent？
text-indent 用于定义块级元素中第一行文本的缩进距离。它只影响段落的第一行，其余行不受影响，非常适合用于模拟中文排版中的“首行缩进两个字符”。
常见用法如下：
p {
text-indent: 2em;
}
这里的 2em 表示当前字体大小的两倍宽度，正好接近中文排版中“两个汉字”的缩进，视觉上很自然。
立即学习“前端免费学习笔记（深入）”；
如何正确使用 text-indent？
要确保 text-indent 起作用，需要注意以下几点：
- 该属性只对块级元素有效（如 p、div、h1-h6），行内元素无效
- 缩进值可以是 em、px、rem、% 等单位，推荐使用 em，因为它能随字体大小自适应
- 负值也是合法的，可用于悬挂缩进等特殊排版
- 继承性：text-indent 可被子元素继承，如果子元素是内联元素，缩进依然作用于第一行
示例：为所有段落设置首行缩进
p {
text-indent: 2em;
line-height: 1.6;
}
避免常见问题
实际使用中容易忽略一些细节：
- 如果段落前后有 margin 或 padding 不当，可能影响整体对齐，建议统一规划间距
- 使用 em 单位时，确保父元素字体大小明确，避免缩进不一致
- 对于不需要缩进的段落（如第一个段落），可用伪类排除：
p:not(:first-of-type) {
text-indent: 2em;
}
这样可以避免文章开头段落也缩进，更符合阅读习惯。
与其他排版方式对比
有人会用
换行后加空格或 实现缩进，但这是不规范的做法：
- 语义混乱，不利于维护
- 无法响应式调整
- 屏幕阅读器可能误读
而 text-indent 是纯样式控制，结构与表现分离，更符合现代前端开发原则。
基本上就这些。合理使用 text-indent，能让网页文字排版更专业、易读，尤其适合文章类站点。不复杂但容易忽略细节。
