text-indent才是控制段落首行缩进的标准属性；::first-letter仅用于首字符装饰，不改变文本起始位置，用它模拟缩进会导致字体、字号或浏览器变化时缩进失准，且对标点等首字符易失效。
text-indent 是首行缩进的正确选择，不是 ::first-letter
直接说结论：text-indent 才是控制段落首行缩进的标准属性；::first-letter 用于选中首字符做装饰（比如下沉、变色），它不改变文本布局的起始位置，强行用它“模拟”缩进会出问题。
常见错误现象：有人给 ::first-letter 加 margin-left 或 padding-left，发现缩进不稳定——换字体、换字号、甚至换浏览器，缩进量就跑偏；更糟的是，如果首字符是标点（如“《”“【”或英文引号），缩进可能完全失效或错位。
-
text-indent的值单位推荐用em（如2em），它基于当前字体的 x-height 计算，真正对应“两个汉字宽度” - 避免用
px或ch：前者在响应式场景下失准，后者对中文字体支持差（ch定义为 “0” 字符宽度，而中文字符宽度不等于 “0”） - 注意继承性：
text-indent不继承，必须作用于p、div等块级容器本身
为什么 2em 能稳定对应两个汉字？
中文字体在常规排版中，一个汉字的显示宽度约等于其 font-size 的 1em（即 em 单位天然适配当前字体度量）。所以 text-indent: 2em 就是“两个汉字宽”，无论字体是 Noto Sans CJK、思源黑体还是微软雅黑，只要没启用异常字距或压缩特性，结果都可靠。
反例：text-indent: 40px 在 16px 字号下看似够用，但用户把字号调到 24px 后，缩进就变成“1.67个字宽”，视觉上就不对了。
- 若需兼容老 IE（
text-indent支持到 IE6），无需额外 hack - 不要写成
text-indent: 2em !important——除非你真在对抗深层内联样式，否则纯属干扰可维护性
什么情况下会误用 ::first-letter 导致缩进失效？
典型场景：段落以空格、换行符、或不可见 Unicode 字符（如 \u200B 零宽空格）开头。此时 ::first-letter 根本不匹配任何可见字符，样式完全不生效。
另一个坑：用 ::first-letter + float: left 想“顶出”首字，会导致后续文字环绕，破坏段落流式布局，且无法精确控制缩进量。
- 检查首字符是否被 HTML 实体或富文本编辑器悄悄插入了零宽字符（可用浏览器开发者工具“元素”面板查看原始文本节点）
-
::first-letter对数字、英文字母、标点都有效，但对全角/半角混排时的宽度计算无感知，不能替代布局控制 - 若设计稿真需要首字下沉+首行缩进共存，应分开处理：
text-indent控制缩进，::first-letter单独设置尺寸/颜色/浮动
移动端和可访问性要注意的细节
部分 iOS Safari 和 Android WebView 对 text-indent 的 subpixel 渲染有微小差异，但 2em 级别缩进基本无感。真正要小心的是屏幕阅读器行为：缩进纯属视觉表现，不影响语义，这点比伪造缩进（如用 或 <span style="margin-left:2em"></span>）强得多。
- 禁止在段首手动加
- 若段落使用了
line-height或font-feature-settings，text-indent仍保持独立生效，无需额外调整 - 深色模式、动态字体大小（iOS 的“更大字体”）下，
2em会自动跟随缩放，这是用固定像素做不到的
实际缩进效果是否准确，取决于你有没有让 text-indent 作用在正确的块级元素上，以及有没有被其他 CSS（比如重置库里的 * { text-indent: 0 }）意外覆盖。这两个地方，比选什么伪元素容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
