text-indent: 2em 不等于两个中文字符宽度，它缩进的是当前 font-size 的两倍，受字体设计、字号和浏览器渲染影响；更可靠的是 text-indent: 2ch，但需注意兼容性与字体差异。
text-indent: 2em 真的缩进“两个字符”吗？
不是。text-indent: 2em 缩进的是当前元素字体大小的 2 倍，不是两个中文字符宽度。比如 font-size: 16px 时，它缩进 32px；而一个中文字符在多数字体下视觉宽度≈16px，看似接近，但实际受字体、字重、渲染引擎影响很大——尤其在等宽 vs 非等宽字体、Chrome vs Safari 下差异明显。
如果你真要“两个汉字宽度”的稳定缩进，得换思路：
- 用
text-indent: 2ch（ch单位基于 “0” 字符宽度，对中文字体不准确，仍不可靠） - 更稳妥的是：显式设置等宽字体 +
text-indent: 2em，并确保父级未重置font-family - 或放弃纯 CSS，用
::first-line配合display: inline-block+ 伪元素插入两个全角空格（
为什么 text-indent 对 inline 元素无效？
text-indent 只作用于块级容器（display: block、table-cell 等），对 span、a 这类默认 inline 元素完全没反应——这是最常被忽略的前提。
常见误用场景：
- 给
<p><span>第一段文字</span></p>的span加text-indent→ 无效 - 给
<div><span>文字</span></div>的div加了text-indent，但div被设成了display: inline-flex→ 依然无效
解决方法很简单：确认目标元素是块级上下文。必要时加 display: block 或保持默认 p/div 行为。
遇到 text-indent 和 padding-left 同时存在时怎么处理？
两者叠加会导致缩进加倍，而且语义混乱：padding-left 是容器内边距，影响整个内容区；text-indent 仅作用于首行。混用容易让维护者误判意图。
典型问题现象：
- 段落看起来缩进过大，检查发现既写了
text-indent: 2em，又写了padding-left: 2em - 响应式断点下，
padding-left被媒体查询修改，但text-indent没同步，缩进错位
建议原则：
- 纯首行缩进 → 只用
text-indent - 需要整体左移内容（如配合图标、边框）→ 用
padding-left或margin-left，别碰text-indent - 必须共存时，把
padding-left设为 0，用text-indent控制视觉起始位置
移动端 iOS Safari 中 text-indent 失效的隐藏原因
某些 iOS 版本（尤其是 15.x–16.x）下，如果元素设置了 transform（哪怕只是 translateZ(0)）、will-change 或开启了硬件加速，text-indent 可能被忽略或渲染异常——这不是 bug，是 WebKit 的合成层绘制限制。
排查线索：
- PC Chrome 正常，iOS Safari 首行顶到左边
- 移除父级的
transform: translateZ(0)后恢复 - 开发者工具里
text-indent显示已计算，但渲染无效果
临时绕过方式：
- 改用
margin-left: -2em+padding-left: 2em模拟（需包裹一层） - 或对 iOS 加特定 hack：
@supports (-webkit-appearance: none) { p { text-indent: 2em; } }（不推荐，仅应急） - 根本解法：避免在有
text-indent的元素上触发合成层，删掉不必要的transform/will-change
真正难的不是写 text-indent: 2em，而是确认它在哪种字体、哪个浏览器、什么渲染上下文中，真的缩进了你眼睛看到的“两个汉字”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
