推荐写法是text-indent: 2em，因em基于当前元素font-size，能随字号等比缩放，兼容性好且符合中文排版习惯；需确保font-size与text-indent在同一规则中声明，避免被覆盖或计算偏差。
text-indent 和 font-size 必须写在同一个选择器里才生效
单独改 font-size 不会自动影响 text-indent 的视觉效果，但如果你用的是 em 单位（推荐），那缩进值会随字体大小动态变化——前提是两者在同一条 CSS 规则中声明，或至少没有更高权重的样式覆盖。
常见错误是把它们拆到不同地方：比如全局设了 p { font-size: 16px; }，又在另一个文件里写 .article p { text-indent: 2em; }。这时若 .article 内部还套了 font-size: 14px，2em 就按 14px 算，不是你预期的 32px。
- 最稳妥写法：
p { font-size: 16px; text-indent: 2em; }—— em 基于当前声明的字号，所见即所得 - 若用
rem，必须确认根元素html { font-size: 16px; }没被 JS 动态修改过，否则缩进会跳变 - 避免混用单位：比如
font-size: 1.2rem; text-indent: 20px;，缩进就失去响应性，小屏下可能太挤
移动端小字号下 2em 缩进可能不够明显
中文排版要求“首行空两字”，但当 font-size 被设为 12px 或更小时，2em 实际只有 24px，在窄屏上视觉上接近一个汉字宽度，用户会觉得“没缩进”。这不是 bug，是单位换算的自然结果。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 测试方法：用 Chrome DevTools 的 Device Toolbar 切换到 iPhone SE（375px 宽），看 computed
text-indent像素值是否 ≥ 28px - 补救方案：用媒体查询微调，例如
@media (max-width: 480px) { p { text-indent: 1.8em; } } - 慎用
ch：虽然2ch语义更准，但中文字体下 1ch 往往远小于一个汉字，且 IE 完全不支持
内联样式里同时设置要加引号，且不能省略单位
在 HTML 标签里用 style 属性一次性设两个属性，容易因格式疏忽失效。比如 style="font-size:16px text-indent:2em" 缺少分号，浏览器直接忽略整条声明。
- 正确写法：
内容
-
text-indent后面不能写2或2px—— 前者无效，后者固定死，失去适配能力 - 内联样式优先级高，适合单次覆盖；但别在多个段落里重复写，维护成本陡增
Flex/Grid 容器中 font-size 生效但 text-indent 失效
这是最隐蔽的问题：父容器设了 display: flex 或 display: grid，子 p 的 font-size 显示正常，但 text-indent 完全没反应。原因不是单位错，而是 text-indent 依赖块级格式化上下文（BFC），而 Flex/Grid 会创建新的格式化上下文，使 text-indent 失效。
- 验证方式：打开 DevTools → Computed → 查
p的display是否还是block；若显示flex或grid，说明被父容器影响了 - 临时解法：给
p强制加display: block;，但注意这可能破坏父容器的布局逻辑 - 长期建议：不用
text-indent做布局对齐，该用语义标签（如）或padding-left控制整体偏移
真正容易被忽略的是：缩进是否生效，和字体是否加载完成无关，但和元素是否处于标准块级流强相关。哪怕 font-size 正确渲染了，只要 text-indent 所在的元素脱离了常规文档流，它就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
