text-indent支持px、cm、em、rem、ex、%、vw/vh、ch等单位；其中em最常用且语义准确，%因基于容器宽度易误用，px在响应式中不自适应，ch在中文字体下不稳定，flex/inline元素需设display:block才生效。
text-indent 支持哪些单位？哪些会出问题
text-indent 接受绝对长度（px、cm）、相对长度（em、rem、ex）、百分比（%）和 vw/vh 等视口单位。但不是所有单位都适合首行缩进场景：
-
em最常用：缩进值基于当前元素的font-size，1em≈ 一个汉字宽度，语义清晰 -
rem可控性更强：基于根元素字体大小，适合全局统一缩进（如统一设为2rem） -
px固定死板：在响应式或用户调整字号时无法自适应，容易缩进过小或过大 -
%容易误用：它是相对于包含块宽度计算的，不是字体大小——比如容器宽 1000px，text-indent: 2%就是缩进 20px，和文字本身完全无关 -
ch值得留意：1ch= 当前字体中 “0” 字符的宽度，中文下基本等同于一个等宽字符，但多数中文字体非等宽，表现不稳定
为什么用 em 而不是 px 写段落首行缩进
用 em 是因为中文排版中，“两字缩进” 是约定俗成的视觉习惯，而这个“字”指的是当前字号下的单个汉字所占水平空间。用 px 会切断这种语义关联：
- 用户放大浏览器字体（如系统设置为 20px），
text-indent: 32px仍固定缩进 32px，可能变成“缩进一整个字+半字”，破坏阅读节奏 - 使用
text-indent: 2em后，只要font-size变，缩进自动等比变化，始终维持“两个汉字宽度”的视觉比例 - 注意：如果父元素
font-size被重置（比如font-size: 0），子元素用em的text-indent会失效（缩进为 0），此时应确保层级中至少有一级有有效字号
inline 元素或 display: flex 容器里 text-indent 不生效怎么办
text-indent 只对块级盒（block container） 生效，且该盒必须生成行框（line box）。以下情况它会被忽略：
- 元素是
display: inline（如span）——即使加了text-indent也无效 - 父容器是
display: flex或display: grid，且子段落未显式设为display: block—— flex item 默认是 inline-level，不触发块格式化上下文 - 元素设置了
display: inline-block但没设width或内容撑开，也可能导致行框未正常建立
解决办法很简单：
- 给需要缩进的元素加
display: block（段落标签如p默认就是，但若被重置需恢复） - 在 flex 容器中，对
p显式写p { display: block; text-indent: 2em; } - 避免在
span上直接用text-indent；如真需内联缩进，改用margin-left+em模拟（但注意这不属于标准首行缩进语义）
遇到 direction: rtl 或 writing-mode: vertical-rl 怎么处理缩进方向
text-indent 的方向不是固定的“向右”，而是沿内联方向（inline direction）起始侧缩进：
- 默认
direction: ltr（从左到右）时，缩进出现在行首左侧 → 视觉上是“向右空两格” - 若设了
direction: rtl，缩进就出现在行首右侧（即文字右边），相当于“向左空两格” - 在垂直排版
writing-mode: vertical-rl下，内联方向是自上而下，text-indent就会作用在每行顶部（即每行第一个字上方留空），而不是左右
这意味着：不要假设 text-indent 总是“左边空出”，它严格遵循 CSS 书写模式规范。多语言站点若混用 rtl 段落，应测试缩进是否出现在预期位置；必要时可配合 direction 局部重置，或改用 padding-inline-start（更现代、方向感知更强，但兼容性略低）。
实际项目里最容易被忽略的是 % 单位的语义错位，以及 flex 容器中忘记给段落恢复 display: block —— 这两个点卡住的人最多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
