在网页排版中，文本缩进是调整内容视觉层级、提升阅读体验的常用操作，HTML本身没有提供直接控制文本缩进的标签，所有缩进效果都需要通过CSS样式来实现，其中最常用的就是text-indent属性。
一、text-indent属性基础用法
text-indent是CSS中专门用于控制块级元素首行文本缩进的属性，只对块级元素生效，内联元素设置该属性不会有任何效果。它的取值可以是长度单位、百分比，也可以设置为负值实现悬挂缩进效果。
最常见的首行缩进2字符的需求，可以通过text-indent: 2em来实现，em是相对单位，1em等于当前元素的字体大小，2em就相当于两个字符的宽度。
/* 段落首行缩进2字符 */
p {
text-indent: 2em;
font-size: 16px; /* 此时1em=16px，2em=32px */
}
/* 首行缩进固定像素值 */
.indent-px {
text-indent: 32px;
}
/* 首行悬挂缩进，首行向左突出 */
.hang-indent {
text-indent: -2em;
padding-left: 2em; /* 避免文字超出容器左侧 */
}
二、不同缩进单位的区别
text-indent支持多种单位取值，不同单位的适用场景有所区别，开发者可以根据实际需求选择：
| 单位类型 | 说明 | 适用场景 |
|---|---|---|
| em | 相对单位，基于当前元素字体大小 | 需要随字体大小自适应缩进的场景，比如首行缩进固定字符数 |
| px | 绝对单位，固定像素值 | 需要固定缩进宽度，不随字体变化的场景 |
| % | 相对单位，基于父容器宽度的百分比 | 需要随容器宽度自适应缩进的场景 |
| rem | 相对单位，基于根元素(html)的字体大小 | 需要基于全局字体标准设置缩进的场景 |
三、其他文本缩进场景实现
1. 列表项缩进
无序列表和有序列表的缩进默认由浏览器自带的样式控制，如果需要自定义列表项的缩进效果，可以修改list-style-position属性，同时调整padding或margin值。
/* 自定义无序列表缩进 */
ul.custom-list {
padding-left: 20px; /* 控制整个列表的缩进距离 */
list-style-position: outside; /* 列表标记在内容区外 */
}
ul.custom-list li {
margin-bottom: 8px;
}
2. 内联元素模拟缩进
如果需要给内联元素添加缩进效果，text-indent不会生效，此时可以通过padding-left或者margin-left来实现，不过需要注意内联元素的padding和margin只有水平方向会生效。
/* 内联元素添加左侧缩进 */
span.indent-inline {
padding-left: 16px;
/* 或者 margin-left: 16px; */
}
四、注意事项
- text-indent只会作用于块级元素的首行，对多行文本的其他行不会生效，如果需要所有行都缩进，应该使用padding-left或者margin-left。
- 当text-indent设置为百分比时，百分比是基于元素包含块的宽度计算的，不是基于字体大小。
- 如果元素设置了text-align: justify两端对齐，text-indent依然会正常生效，首行会按照设置的缩进值偏移后再进行两端对齐。
- 行内块元素(inline-block)设置text-indent时，缩进效果会作用于元素内的首行文本，但是元素本身不会像块级元素那样占据整行宽度。
总结：HTML文本缩进的核心实现方式是使用CSS的text-indent属性，针对不同的缩进需求选择对应的单位，特殊场景可以结合padding、margin属性调整，掌握这些技巧就能应对绝大多数网页文本缩进的开发需求。
HTMLtext_indentCSS前端样式修改时间：2026-07-10 20:00:21