如何在CSS中实现段落首行缩进_通过::first-line设置文字首行缩进

使用text-indent属性实现段落首行缩进，如p{text-indent:2em;}，而::first-line伪元素仅用于设置首行文字样式，不支持缩进控制。

在CSS中实现段落首行缩进，通常使用 text-indent 属性，而不是 ::first-line 伪元素。::first-line 主要用于设置首行文字的样式（如颜色、字体），不能用来控制缩进。下面详细介绍正确的做法和相关说明。

使用 text-indent 实现首行缩进

这是最标准、最常用的实现方式。通过 text-indent 属性，可以指定段落首行的空白长度。

示例：

p {
  text-indent: 2em;
}

上述代码会让所有

段落的首行缩进两个字符宽度（em 是相对单位，1em 约等于当前字体大小）。

为什么不能用 ::first-line 设置缩进？

::first-line 伪元素的作用是选中段落的第一行文本，用于样式修饰，比如：

p::first-line {
  color: red;
  font-weight: bold;
}

但该伪元素不支持 text-indent 属性，也无法通过 margin 或 padding 来实现首行缩进效果。它的样式作用范围有限，不适合布局控制。

注意事项与最佳实践

• 若希望只对中文排版缩进两个字符，推荐使用 2em，因为中文字体通常是等宽或接近等宽。
• 避免对标题（h1-h6）或其他非段落元素应用 text-indent，除非有特殊需求。
• 如果段落内包含浮动元素或弹性布局子元素，注意 text-indent 可能表现异常，需结合结构调整。
• 可配合其他排版属性，如 line-height、text-align，提升整体可读性。

基本上就这些。正确使用 text-indent 才是实现首行缩进的关键，而 ::first-line 更适合做视觉样式修饰，不要混淆两者的用途。