应使用 text-indent 实现段落首行缩进，因其专为此设计；::first-line 仅支持文本样式，不支持 margin、padding 等布局属性，设置无效。
用 text-indent 而不是 ::first-line 实现段落首行缩进
::first-line 伪元素用于选中段落的**第一行文本内容**，但它不控制布局偏移，只影响字体、颜色、背景等文本样式。想让整行向右“空出两个字位置”，必须用 text-indent——这是专为此设计的 CSS 属性。
text-indent 的基本写法和常见单位
它作用于块级元素（如 p、div），对首行第一个字符前插入空白。常用值：
-
text-indent: 2em：最稳妥，1em ≈ 当前字体大小，兼容中英文混排 -
text-indent: 32px：像素值固定，但响应式场景下可能失配字号变化 -
text-indent: 2ch：按字符宽度缩进（ch单位以"0"宽度为基准），适合等宽字体环境 - 负值如
text-indent: -1em可实现悬挂缩进（首字凸出）
为什么不用 ::first-line 加 margin-left 或 padding-left？
::first-line 是伪元素，不能设置盒模型属性（margin、padding、width 等均无效）。以下写法不起作用：
/* ❌ 无效 */
p::first-line {
margin-left: 2em;
padding-left: 2em;
width: 100%;
}即使加上 display: inline-block，也会破坏行内流式布局，导致换行异常或截断。
立即学习“前端免费学习笔记（深入）”；
注意 text-indent 的边界行为
它只影响“视觉首行”，受这些因素影响：
- 当段落开头是
<span></span>、<strong></strong>等内联元素时，缩进仍生效 - 若首行有浮动元素（
float: left），缩进起点会从浮动元素右侧开始计算 - 在 flex 或 grid 容器中，
text-indent对子项无效（需作用于内部的p元素本身） - 部分中文排版需求（如标点悬挂）需配合
hanging-punctuation，与text-indent无关
实际缩进效果取决于字体渲染和浏览器对 em 的解析精度，尤其在小字号或 WebFont 加载未完成时可能出现微小偏差。
