text-indent是唯一语义正确、原生支持首行缩进的手段，但仅对块级元素生效；失效主因包括元素非块级、父容器为flex/grid、首行含内联替换元素、高权重样式覆盖或white-space干扰，推荐用2em单位并配合开发者工具验证computed值。

text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，直接写 p { text-indent: 2em; } 就能生效——但前提是它真在起作用，而不是被布局、单位或样式覆盖悄悄屏蔽了。

为什么加了 text-indent 却没缩进

不是代码写错了，是渲染条件没满足：

• p 被设成 display: inline 或 inline-block —— 浏览器不识别“首行”概念
• 父容器用了 display: flex 或 display: grid，p 的块级盒行为被覆盖
• 段落开头是 <img>、<svg></svg> 等内联替换元素，缩进发生在该元素左侧，视觉上等于没动
• 某处高权重样式写了 p { text-indent: 0 !important }（常见于富文本编辑器输出）
• 用了 white-space: nowrap 或 white-space: pre —— 破坏换行，“首行”失去意义

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

text-indent 该用 em 还是 px

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

• em 是相对于当前字体大小的单位，字号放大时缩进同步变宽，适配阅读习惯
• px 固定死在 32px 或 20px，字号调大后缩进就显得太小，用户 zoom 页面时易错位
• 避免用 %：它基于包含块宽度，窄屏下缩进可能过大（比如 2% 在 320px 宽度下仅 6.4px，远不够两字符）
• rem 理论上可行，但依赖 html 根元素字体设置，若项目中动态改过 font-size（如夜间模式），缩进会意外跳变

中文场景下，2ch 更贴近单字宽度语义，但 IE 不支持，且部分中文字体里 1ch 远小于一个汉字，稳妥起见仍推荐 2em。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

Flex/Grid 容器里缩进失效怎么办

这不是 bug，是格式化上下文变更的自然结果：

• 给 <p></p> 显式加 align-self: flex-start（Flex 场景）
• 确保 <p></p> 的 width 不为 auto，否则可能退化为内联行为
• 更干净的做法：把缩进逻辑交给父容器的 padding-left，段落自身保持纯内容流
• 若必须保留在子元素上，可临时用 margin-left + display: inline-block 强制触发块格式化上下文，但会破坏语义

真正要注意的其实是缩进单位和上下文的关系——em 看的是当前元素字体大小，rem 看根字体，ch 看 “0” 字宽。同一段 CSS 在不同嵌套层级里表现可能不一样，调的时候得盯着实际渲染结果看，别光信代码里写的数字。

最常被忽略的一点：首段通常不该缩进，也常需去掉顶部 margin。p:first-of-type { margin-top: 0; text-indent: 0; } 这一行，漏掉就会让整页阅读起点错位。

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