使用CSS的text-indent属性可实现HTML文本首行缩进。1. text-indent支持em、px、%等单位，推荐2em以匹配中文排版习惯；2. 可通过内联样式、内部样式表或外部CSS文件应用，其中外部引入利于多页统一管理；3. 仅对p、div等块级元素有效，建议清除默认margin和padding避免布局错乱；4. 实际应用中常配合line-height和margin优化段落间距，提升阅读体验。正确使用text-indent能显著增强网页中文内容的可读性与美观度。
在HTML中实现文本首行缩进，主要依靠CSS的text-indent属性。虽然HTML本身不直接支持段落缩进，但通过结合CSS样式，可以轻松控制段落首行的缩进效果。
1. 使用 text-indent 属性设置首行缩进
text-indent 是专门用于定义块级元素首行缩进的CSS属性。它只影响段落第一行的起始位置，其余行不受影响。
常见用法示例：-
p { text-indent: 2em; }—— 设置段落首行缩进两个汉字宽度（推荐） -
p { text-indent: 20px; }—— 固定像素缩进，适合精确控制 -
p { text-indent: 10%; }—— 相对于父容器宽度的百分比缩进
2. 在HTML中应用CSS缩进的三种方式
你可以通过以下方式将 text-indent 应用到HTML文本中：
内联样式（直接写在标签里）
立即学习“前端免费学习笔记（深入）”；
适用于单个段落：<p style="text-indent: 2em;">这是一个首行缩进的段落。</p>
内部样式表（写在 head 中）
适用于当前页面所有段落：
<style>
p {
text-indent: 2em;
}
</style>外部CSS文件（推荐）
统一管理多个页面的样式：/* 在 style.css 中 */
p {
text-indent: 2em;
}
然后在HTML中引入：
<link rel="stylesheet" href="style.css">
3. 注意事项与常见问题
使用 text-indent 时需注意以下几点，避免出现意外效果：
- 该属性只对块级元素有效，如
p、div、h1-h6等 - 如果段落前后有换行或空格，建议清除默认 margin 和 padding，避免叠加影响布局
- 使用
em单位可更好适配不同字体大小，通常 2em ≈ 两个中文字符宽度 - 若设置了
text-align: justify，首行缩进仍会正常生效
4. 实际应用场景示例
一个典型的中文排版需求：每段首行缩进两个汉字，段间距适中。
<style>
p {
text-indent: 2em;
line-height: 1.6;
margin: 1em 0;
}
</style>
<p><p>这是第一段文字，首行已缩进。后续行正常对齐，符合中文阅读习惯。</p>
<p>这是第二段文字，同样实现了首行缩进效果。</p>基本上就这些。掌握 text-indent 的使用，能让你的网页文本更符合中文排版规范，提升可读性。
