text-indent: 2em缩进“看起来不对”是因为中英文字符宽度不一致：中文近似正方形（如16px字体下宽≈16px），英文字符仅6–10px宽，而2em按font-size统一计算（如32px），导致英文开头时缩进过大、中文开头时较匹配。
text-indent: 2em 在中英文混排里为什么缩进“看起来不对”
不是值写错了，而是中英文字符宽度不一致导致视觉错觉。中文汉字在多数字体下接近正方形（如 16px 字体时宽≈16px），而英文字符（如 “a”、“x”）通常只有 6–10px 宽。text-indent: 2em 是按当前 font-size 计算的绝对距离（比如 16px 字体下 = 32px），它对所有内容一视同仁——所以首行若以英文开头，32px 缩进会显得过大；若以中文开头，又刚好接近两字宽。
常见错误现象：text-indent: 2em 加了，但段落开头是 “HTML is...”，结果首字母离左边界太远，像多缩了一行。
- 别用
2ch：虽然语义上更贴近“字符数”，但中文字体下1ch常远小于一个汉字（尤其在思源黑体、Noto Sans SC 中），且 IE 完全不支持 - 别依赖
text-align: justify自动补缩进：它对中文无效，除非同时加text-justify: inter-character和lang="zh" - 若段落以英文单词起始，可临时加
span包裹并设display: inline-block; width: 2em;占位，再让后续文本自然流过去（慎用于长文本）
中英文混排时 text-indent 和 letter-spacing 的冲突点
letter-spacing 对西文影响显著，对中文几乎不可见——但它会叠加在 text-indent 的起始位置之后生效。也就是说，缩进量固定，但首字符被拉宽后，视觉上“第一字”的右边缘会外移，造成缩进“变浅”的错觉。
典型场景：某段落设了 letter-spacing: 0.05em + text-indent: 2em，开头是 “JavaScript”，结果 “J” 被撑开，后面字符依次右推，整行实际占用宽度增加，但缩进起点没变，导致首字和左边界间隙变小。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 调试建议：打开开发者工具 → 查看该
p元素的Computed值 → 确认text-indent是否仍为预期值（常被高权重规则覆盖） - 解决方案：混排段落优先用
text-indent: 2em，禁用全局letter-spacing；如需微调西文可单独给英文部分加span.lang-en { letter-spacing: 0.03em; } - 避免
text-rendering: optimizeLegibility和letter-spacing同时启用：前者已含字距优化逻辑，叠加后者易引发渲染抖动
富文本编辑器输出或 CMS 生成的段落为何缩进失效
很多 CMS（如 WordPress、Notion 导出 HTML）或编辑器（如 TinyMCE、Quill）默认把 p 标签设为 display: inline-block 或套了 div 容器并启用了 flex 布局，导致 text-indent 失效——因为它只对块级格式化上下文中的块级元素生效。
错误现象：样式表写了 p { text-indent: 2em; }，但页面上完全没反应；检查 computed 样式发现 display 是 inline-block 或父容器是 display: flex。
- 最快验证：在开发者工具中选中段落 → 切到
Computed→ 查display是否为block，text-indent最终值是否非零 - 兼容方案：对 CMS 输出加兜底规则，例如
p, .ql-editor p { display: block !important; text-indent: 2em; } - 若无法改 HTML 结构，可用
padding-left替代：它不依赖块级盒行为，但注意这是整段缩进，不是“首行”缩进
竖排中文混英文时 text-indent 还管用吗
不管用。writing-mode: vertical-rl 下，text-indent 的方向逻辑会翻转——它缩进的是“首列”顶部，而不是传统意义上的“首行”。更糟的是，若没配 text-orientation: upright，英文会变成纵向堆叠（H↵T↵M↵L），此时 text-indent 作用在 H 上，视觉完全混乱。
正确做法：竖排场景下放弃 text-indent，改用 padding-top 模拟“首行缩进”效果（因竖排时“行”=“列”，“首行”=“顶部”）。
- 必须设置
text-orientation: upright，否则西文字符无法直立显示 - 容器需有明确
height，否则竖排内容会无限拉长；配合overflow: hidden或text-overflow: ellipsis控制截断 - 竖排时
text-align: center表示垂直居中，text-align: right表示顶部对齐——和横排相反，容易误判
真正麻烦的从来不是写一行 text-indent: 2em，而是你不知道它在哪种布局、哪种字体、哪种语言组合下会静默失效。每次加缩进前，先确认 display 类型、字体度量、writing-mode 状态——比反复调数值更省时间。
