什么是缩进
在排版中，有时候需要把段落的第一行缩进一段距离，这就是文本缩进。文本缩进可以提高段落的整体美感，使段落看起来更加整洁。在HTML中，我们可以用CSS样式来实现文本缩进。
如何设置文本缩进
在CSS样式中，我们可以用text-indent属性来设置文本缩进。text-indent属性的值可以是一个长度值，也可以是一个百分比值。长度值表示缩进的长度，百分比值表示缩进距离整个容器宽度的百分比。
使用长度值进行设置
我们以长度值为例，假设我们想要缩进2个字符的距离，我们可以这样设置：
p {
text-indent: 2em;
}
注意：em是一个相对单位，表示当前元素的字体尺寸。如果当前段落的字体大小为16px，那么2em就等于32px。也就是说，这个段落的第一行缩进32px的距离。
使用百分比值进行设置
如果我们想要缩进整个容器宽度的20%，我们可以这样设置：
p {
text-indent: 20%;
}
注意：百分比值是一个相对单位，表示缩进距离容器宽度的百分比。如果这个段落的容器宽度为1000px，那么这个段落的第一行就会缩进200px的距离。
如何设置首行缩进
在CSS样式中，我们可以用text-indent属性来设置文本缩进。如果我们想要设置首行缩进，只需要把text-indent设置为正值即可。如果我们想要取消首行缩进，只需要把text-indent设置为0。
设置首行缩进
如果我们想要设置首行缩进，可以这样设置：
p {
text-indent: 2em;
}
上面的代码表示设置段落的第一行缩进2em的距离。这样就可以实现首行缩进的效果。
取消首行缩进
如果我们想要取消首行缩进，可以这样设置：
p {
text-indent: 0;
}
上面的代码表示取消段落的首行缩进。这样就可以实现取消首行缩进的效果。
示例
下面是一个完整的示例，演示如何通过CSS样式实现文本缩进。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缩进示例</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>这是一个段落文本，通过CSS样式实现了首行缩进效果，缩进距离为2em。</p>
</body>
</html>
总结
文本缩进是排版中的一个重要概念，通过合适的文本缩进可以提高排版的整体美感。在HTML中，我们可以通过CSS样式来实现文本缩进，text-indent属性是设置文本缩进的关键。在设置首行缩进时，只需要把text-indent设置为正值即可。