text-indent 是首行缩进的标准解，专为段落内容区起始偏移设计；::first-line 仅修饰首行外观，无法可靠控制缩进，且在响应式场景下易出现“跳变”。
段落首行缩进用 text-indent 就够了，不需要动用 ::first-line。
为什么 ::first-line 不适合做首行缩进
::first-line 作用是选中段落的**第一行文本内容**，但它不能改变盒子布局结构，也不能替代 text-indent 的排版功能。它常用于首行字体、颜色、大小等装饰性样式，但对缩进控制既不直观也不可靠：
- 缩进本质是段落内容区的起始偏移，属于块级盒模型行为，
text-indent是专为此设计的属性 -
::first-line在换行位置不确定时（如响应式宽度变化）可能作用到意外的文字上，导致缩进“跳变” - 给
::first-line设margin-left或padding-left无效——这些属性在伪元素上不触发文本位移
真正灵活控制首行缩进的方法
用 text-indent 配合现代 CSS 单位和计算，就能满足绝大多数“更灵活”的需求：
- 用
ch单位按中文字符宽缩进：text-indent: 2ch;（约等于两个汉字宽度） - 用
em实现字号自适应缩进：text-indent: 2em;（始终是当前字体大小的两倍） - 用
calc()混合单位：text-indent: calc(1em + 4px); - 配合
@media做响应式缩进：@media (max-width: 768px) { p { text-indent: 1em; } }
特殊情况：需要“视觉缩进”而非排版缩进
如果目标是仅让第一行文字看起来缩进（比如加图标、换字体、变色），而不想影响后续换行或语义布局，这时 ::first-line 才派上用场：
立即学习“前端免费学习笔记（深入）”；
p::first-line { font-weight: bold; color: #333; }p::first-line { letter-spacing: 1px; }- 注意：它不能“把第一行整体向右推”，只能修饰已存在的文本外观
基本上就这些。首行缩进这件事，别绕远路——text-indent 是标准解，清晰、稳定、可预测。
