应优先使用 text-indent: 2ch 实现中文首行缩进，因其以“0”字符宽度为基准更稳定；若需兼容 IE，则用 text-indent: 32px 并固定 font-size 为 16px，同时确保元素为块级、清除 margin-left 和 padding-left 干扰。
text-indent: 2em 为什么缩进看起来不对
因为 em 是相对当前字体大小的单位，如果父元素或段落本身设置了 font-size，2em 就不等于“两个中文字符宽”。中文字体下，一个汉字通常接近 1em 宽度，但受字体、字重、浏览器渲染影响，实际可能偏窄或偏宽。
常见错误现象：text-indent: 2em 在某些字体（如 "Microsoft YaHei"）下缩进明显不足，或在 font-size: 12px 时缩进太小、看不出来。
- 优先考虑用
text-indent: 2ch——ch单位以“0”字符宽度为基准，对等宽/准等宽中文字体更稳定 - 若必须兼容老浏览器（IE），
ch不支持，可退回到text-indent: 32px（假设字号 16px，两字符≈32px），但需配合固定font-size - 注意：
text-indent对display: inline元素无效，只作用于块级或 inline-block 元素
首行缩进被 margin 或 padding 破坏
缩进没生效，大概率是外层容器加了 padding-left 或段落本身有 margin-left，视觉上干扰了 text-indent 的效果。
使用场景：常出现在 CMS 输出的富文本、Markdown 渲染后包裹的 <p>，或重置样式（如 normalize.css）影响了默认边距。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查该
<p>元素的盒模型，重点看padding-left和margin-left是否非零 -
text-indent是内容区域内的偏移，不会抵消外部留白；要清理干扰，直接设padding-left: 0和margin-left: 0 - 如果全局重置了
p样式，建议把text-indent写在更具体的选择器里，比如.article-content p，避免被覆盖
text-indent 在 flex / grid 容器里失效
text-indent 对 flex item 或 grid item 中的段落可能不触发，尤其当父容器设置了 display: flex 且子元素未显式设 display: block 时。
原因：flex item 默认是 display: block，但某些 CSS 框架或自定义样式会把它改成 display: inline-flex 或其他值，导致内部 <p> 失去块级上下文。
- 检查父容器的
display值，以及该<p>的计算后display是否仍为block - 强制恢复块级行为：
p { display: block; text-indent: 2ch; } - 不要依赖父容器的 flex 属性“透传”缩进逻辑——
text-indent不继承，也不受 flex 排列影响，它只管自己这一行的开头
中文排版需要缩进但不想影响语义结构
有些场景（如响应式卡片、摘要列表）要求视觉缩进，但又不能真让文字物理偏移，否则可能破坏屏幕阅读器朗读顺序或 SEO 文本提取。
性能与兼容性影响：用伪元素模拟缩进比改 text-indent 多一层 DOM，但几乎无性能负担；而 text-indent 被所有浏览器支持，包括 IE8+。
- 安全做法仍是直接用
text-indent，只要确保父元素没有干扰边距和显示模式 - 若担心语义问题（极少数情况），可用
::before+content: " "（全角空格），但需注意全角空格在不同字体下宽度不一致 - 别用
margin-left或padding-left模拟缩进——这会把整个段落左推，破坏对齐，且无法实现“仅首行”效果
真正容易被忽略的是字体本身：思源黑体、霞鹜文楷等开源中文字体对 ch 单位支持较好，而某些旧版微软雅黑或内嵌网页字体可能让 2ch 偏窄。上线前最好在目标字体下实测。
