text-indent: 2ch是最接近“两个汉字”缩进的选择，因它以字体中“0”字符宽度为基准，多数中文字体下与汉字视觉等宽；否则退用2em并确保元素为块级、无flex/grid干扰及高权重覆盖。

直接用 text-indent: 2ch，但必须确认浏览器支持且字体中“0”与汉字等宽；否则退到 text-indent: 2em，并确保元素是块级、无干扰盒模型样式。

为什么 text-indent: 2ch 是最接近“两个汉字”的选择

ch 单位以当前字体中 "0" 字符的宽度为基准，在多数中文字体（如 “PingFang SC”、“Microsoft YaHei”、“Source Han Sans”）里，“0” 和汉字视觉宽度基本一致，所以 2ch 在现代浏览器中缩进效果最稳定。

• iOS Safari 12+ 和 Chrome/Firefox/Edge 均支持，但 iOS 15+ 系统字体下可能略偏小（约 1.8ch），可微调为 text-indent: 2.2ch 实测
• IE11 及更早版本完全不支持 ch，需用 @supports 降级
• 某些非标准字体（如图标字体、手写体）中 "0" 极窄或异常，ch 会失效，务必在目标字体下实测渲染

text-indent: 2em 不等于两个汉字，但仍是兼容性最优解

2em 缩进的是当前元素 font-size 的两倍，不是字符数。例如 font-size: 16px 时缩进 32px，而一个中文字实际宽度常在 15–18px 区间，所以 2em ≈ 1.7–2.3 个汉字宽——它不精确，但足够实用。

• 必须确保元素是块级：
  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载
  默认 OK，但 或被重置过 display 的元素要加 display: block 或 inline-block
• 避免在 display: flex 容器的直接子元素上依赖 text-indent，flex item 的文本对齐由 justify-content 控制，text-indent 可能被忽略
• 若父元素 font-size: 0（常见于清除 inline 元素间隙的 hack），子元素的 2em 会变成 0，需显式恢复字号

哪些情况会让 text-indent 看起来“没生效”

失效极少因语法错误，多因上下文不满足块级格式化上下文（BFC）条件。

• 、 等 display: inline 元素加了 text-indent → 完全无效，必须加 display: inline-block 或 block
• 父容器设了 text-align: justify 且段落只有一行 → 浏览器为拉伸对齐可能取消首行缩进，加 text-align: left 覆盖即可
• 段落自身有 margin-left 或外层容器有 padding-left → 视觉叠加导致错觉，应重置：margin-left: 0; padding-left: 0;
• 内容含 或 vertical-align: top/middle 的 inline 元素 → text-indent 仍作用于首行第一个 inline box 起点，但视觉上可能被遮挡，建议检查 computed 样式中的 line-height 和 vertical-align

别用 padding-left 替代 text-indent

padding-left 会把整段文字（包括首行）一起左移，破坏“仅首行额外缩进”的中文排版语义；混用二者会导致双倍缩进或错位。

• 真要整体左偏移（比如整段缩进避让侧边栏），用 padding-left，但此时不应再设 text-indent
• 要模拟悬挂缩进（如参考文献格式），可用 text-indent: -1em; padding-left: 1em，但需加 overflow-wrap: break-word 防溢出
• 移动端 iOS Safari 对 ch 和 em 都有轻微渲染偏差，若要求极高一致性，可在关键段落用伪元素 + display: inline-block; width: 2em 模拟（兼容所有浏览器）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！