首行缩进是排版场景中非常基础的需求，不同的使用场景对应不同的设置方式，下面分别介绍网页开发和办公软件场景下的具体设置方法。
网页开发中的首行缩进设置
在HTML页面开发中，首行缩进通常通过CSS的text-indent属性实现，这个属性专门用来定义文本块中首行文本的缩进距离。
基础语法
text-indent的语法格式如下：
/* 选择器 {
text-indent: 缩进值;
} */
p {
text-indent: 2em;
}
上面的代码表示所有<p>标签内的段落首行都会缩进2个字符的宽度，这里的em是相对单位，1em等于当前元素的字体大小，2em就是两个字符的宽度，这种设置方式可以跟随字体大小自适应，是比较推荐的取值方式。
不同单位的区别
text-indent支持多种单位取值，不同单位的特点如下：
| 单位类型 | 说明 | 适用场景 |
|---|---|---|
| em | 相对单位，基于当前字体大小 | 需要跟随字体自适应缩进的场景 |
| px | 绝对单位，固定像素值 | 固定排版、不需要响应字体变化的场景 |
| rem | 相对单位，基于根元素字体大小 | 全局统一缩进规则、响应式布局场景 |
| % | 相对单位，基于父元素宽度的百分比 | 需要按容器宽度比例缩进的场景 |
实际代码示例
下面是一个完整的HTML页面示例，展示不同缩进值的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>首行缩进示例</title>
<style>
.para-2em {
text-indent: 2em;
font-size: 16px;
margin-bottom: 10px;
}
.para-20px {
text-indent: 20px;
font-size: 16px;
margin-bottom: 10px;
}
.para-5percent {
text-indent: 5%;
font-size: 16px;
width: 500px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p class="para-2em">这是使用2em作为缩进值的段落，首行会缩进两个字符的宽度，当字体大小改变时，缩进的宽度也会同步改变。</p>
<p class="para-20px">这是使用20px作为缩进值的段落，首行会固定缩进20像素，不会随字体大小变化而改变。</p>
<p class="para-5percent">这是使用5%作为缩进值的段落，首行缩进宽度是父元素宽度的5%，这里父元素宽度是500px，所以缩进25px。</p>
</body>
</html>
注意事项
text-indent属性会被子元素继承，如果子元素不需要缩进，可以单独设置text-indent: 0- 行内元素默认不支持
text-indent，需要设置display: block或者display: inline-block才会生效 - 如果段落内有图片等行内替换元素在首行开头，缩进会作用在元素之前
办公软件中的首行缩进设置
在Word、WPS等文字处理软件中，设置首行缩进的步骤基本一致：
Word/WPS设置步骤
- 选中需要设置首行缩进的段落，或者将光标放在目标段落内
- 右键点击选中区域，选择段落选项，打开段落设置弹窗
- 在缩进和间距选项卡中，找到缩进区域的特殊格式下拉框，选择首行选项
- 在右侧的磅值输入框中设置缩进值，通常设置为2字符即可
- 点击确定按钮保存设置
如果需要批量设置全文的首行缩进，可以按下Ctrl+A全选内容，再按照上面的步骤操作即可。
快捷键设置方式
部分版本的办公软件支持快捷键快速设置首行缩进：
- 选中段落后按下Ctrl+T，可以增加首行缩进量
- 选中段落后按下Ctrl+Shift+T，可以减少首行缩进量
不同软件版本的快捷键可能存在差异，如果快捷键无效，还是建议使用段落设置的方式操作。
常见问题解答
为什么设置了text-indent没有效果
首先检查元素是否是行内元素，行内元素需要改为块级元素才会生效；其次检查是否有其他CSS规则覆盖了text-indent属性，可以通过浏览器开发者工具查看最终生效的样式。
首行缩进设置多少合适
中文排版通常建议首行缩进2个字符，也就是2em的取值；英文排版通常首行不缩进，或者缩进1em左右，具体可以根据实际的排版规范调整。
首行缩进CSStext-indentHTML段落排版修改时间：2026-07-22 23:30:41