text-indent失效主因是元素非块级（如inline、flex item），或white-space、overflow、direction、table-cell、flex/grid上下文等限制；验证应查computed中display是否为block且text-indent值非0。

直接用 text-indent，别碰 padding-left 或 margin-left —— 后者是整段偏移，不是缩进。

为什么 text-indent 加了却没效果

不是代码写错了，而是渲染前提没满足：

• display 不是 block（比如被设成 inline、inline-block 或 flex item）
• 父容器用了 display: flex 或 display: grid，导致子 p 的块级盒行为退化
• 段落开头是 <img>、<svg></svg> 等内联替换元素，缩进发生在它左边，视觉上“没动”
• 有更高权重样式覆盖，比如富文本编辑器输出的 text-indent: 0 !important
• white-space: nowrap 或 pre 类样式禁用了换行，“首行”语义失效

最快验证方式：打开开发者工具 → 查看目标 p 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。

text-indent 该用 em 还是 px

优先选 2em，原因很实在：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• em 随当前字体大小变化，字号放大时缩进同步变宽，中文阅读下始终接近两字符宽度
• px 固定死（如 32px），系统缩放、DPI 变化或用户调大字体时，缩进会显得太小甚至消失
• 别用 %：按父容器宽度算，窄屏下可能只剩几像素（比如 2% 在 320px 宽度下仅 6.4px）
• 慎用 rem：若项目用 JS 动态改 html { font-size }（如夜间模式），缩进会意外跳变

如果必须固定像素（如印刷级精确控制），再考虑 px，但得接受响应式场景下的失配风险。

Flex/Grid 容器里 text-indent 失效怎么办

这不是 bug，是格式化上下文变更的自然结果。强行加 display: block 可能解决部分情况，但更可靠的做法是换思路：

• 首选 padding-left: 2em：不依赖“首行”语义，对 flex item / grid item 同样生效，视觉效果几乎一致
• 若必须保留 text-indent 语义（比如兼容旧打印样式），给 p 显式加 display: block，并确保其 width 不是 auto（flex item 默认 width: auto 可能导致退化）
• 别在导航菜单、卡片标题这类本就不该有“段落缩进”语义的地方硬套 text-indent——那是间距问题，该用 margin-left 或 padding-left

真正容易被忽略的是：缩进单位和布局上下文的耦合性。一个 2em 在普通文档流里很稳，但在 flex 容器中可能完全不触发；而你调了半天 CSS，其实该先看一眼 computed display 和父容器的 display 类型。

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