如何用CSS的text-indent实现段落首行缩进？

text-indent只影响第一行且对inline元素无效；必须作用于块级容器（如p、div），内联元素需设display:block或包裹块级标签；推荐用2em单位实现响应式中文首行缩进，避免px硬编码。

text-indent 只影响第一行，且对 inline 元素无效

text-indent 作用对象必须是块级容器（如 p、div、p），它不会缩进内联元素（比如 span 或纯文本节点）的首行。常见误用是给 span 加 text-indent，结果毫无反应——因为 span 默认是 display: inline。

如果真要对某段内联内容做首行缩进，得先让它“变成块”：

– 加 display: block 或 display: inline-block；

– 或直接套一层 p / div。

单位选 em 还是 rem？别用 px 做中文段落缩进

中文排版习惯首行缩进两个汉字宽度，而汉字在多数字体中宽度 ≈ 1em，所以 text-indent: 2em 是最稳妥的选择。用 px（如 text-indent: 32px）会导致缩进在字号变化或用户缩放时失准；用 rem 则受根字体大小影响，若页面动态改了 :root 的 font-size，缩进会意外变大或变小。

例外情况：

– 若父容器用了非标准字体（如等宽字体或超细字体），1em 不等于一个汉字宽，此时可微调为 2.1em 或 1.9em；

– 纯英文内容一般不用首行缩进，但若需兼容中英混排，仍建议统一用 em。

负值 text-indent 能实现悬挂缩进，但慎用于可访问性场景

text-indent 支持负值，常用来做「悬挂缩进」（hanging indent），比如参考文献列表：

p.citation { text-indent: -2em; padding-left: 2em; }

但要注意：

– 屏幕阅读器仍按 DOM 顺序读取，视觉上的悬挂不影响语义顺序；

– 若负缩进过大（如 -10em），文字可能被裁切（尤其在 overflow: hidden 容器里）；

– 配合 padding-left 使用是为了避免文字贴边，数值应与 text-indent 绝对值一致。

flex 或 grid 容器里的 text-indent 失效？不是 bug，是渲染逻辑使然

当 p 标签被放进 display: flex 或 display: grid 的父容器中，text-indent 依然生效——前提是该 p 自身仍是块级盒（默认就是）。失效的真正原因是：有人把 text-indent 错加在了父容器上，或者给 p 显式设了 display: flex，让它退化成 flex 容器，从而失去块级文本流行为。

验证是否生效的小技巧：

– 检查 computed styles，确认 display 是 block（或 inline-block 等能触发 BFC 的值）；

– 临时加个 border: 1px solid red 看盒子边界，排除 margin/padding 干扰；

– 在 DevTools 里删掉父容器的 display: flex，看缩进是否恢复——若恢复，说明问题出在布局上下文，而非 text-indent 本身。

实际项目里最容易被忽略的是：缩进值随字体变化而浮动，而不是固定像素。一旦换字体或用户启用系统大号字体，2em 才真正保持「两个字宽」的语义。