text-indent: 2em 是唯一可靠且语义正确的首行缩进写法，专为块级元素设计，随字体大小等比缩放，避免使用全角空格、padding-left 或固定像素值。
text-indent: 2em 是唯一可靠且语义正确的写法
直接写 p { text-indent: 2em; } 就能生效，前提是 p 是块级元素、没被更高优先级样式覆盖、也没落在 Flex/Grid 容器的直系子项里。它只推第一行开头，后续行自动对齐左边界，不影响 text-align: justify 或响应式换行。
别用全角空格、 或 padding-left 模拟——前者破坏复制粘贴和可访问性，后者会让整段右移，小屏下容易溢出，两端对齐也会错乱。
-
2em是关键：1em ≈ 当前字号，缩进随字体放大/缩小等比变化，视觉上始终接近“两汉字” - 避免
2ch：IE 完全不支持，且多数中文字体下1ch远小于一个汉字宽度 - 禁用
rem或固定px：系统缩放、夜间模式 JS 动态改根字号时，缩进会突兀跳变
为什么加了 text-indent 却没缩进？先查这几点
不是代码错了，而是渲染前提没满足。打开开发者工具 → Computed 面板 → 看目标 p 的 display 是否为 block，text-indent 最终值是否为 0。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
p被设成display: inline或inline-block：浏览器不识别“首行”概念 - 父容器是
display: flex或display: grid：子项默认不触发块级格式化上下文，text-indent失效 - 段落开头是
<img>或<svg></svg>：缩进发生在该内联替换元素左侧，视觉上等于没动 - 某处写了
p { text-indent: 0 !important; }：常见于 CMS 富文本输出，需用更高权重覆盖 - 用了
white-space: nowrap或direction: rtl：前者让“首行”失去意义，后者会反转缩进方向
Flex/Grid 容器里的段落怎么缩进
这不是 bug，是 CSS 格式化上下文的天然限制。text-indent 要求元素参与块级布局，而 flex item / grid item 默认不生成块级框。
- 首选方案：
padding-left: 2em—— 不依赖“首行”语义，所有布局都认，视觉效果几乎一致 - 若必须保留
text-indent（如对接旧打印样式）：给p显式加display: block，并确保其width不是auto（flex item 默认就是auto，易退化） - 别在导航菜单、卡片标题这类地方硬套
text-indent：那是间距问题，该用margin-left或padding-left
表格单元格（td/th）里缩进最稳的办法
td 默认是 display: table-cell，不生成标准“首行盒”，text-indent 极易失效，尤其内容短、未换行时。
- 稳妥做法：
td, th { padding-left: 2em; }—— 不依赖行盒，所有浏览器都认 - 若导出 PDF 必须保留首行缩进语义：
<td><div style="text-indent: 2em;">内容</div></td> - 调试技巧：临时加
background: #ff0到td上，如果背景框里文字还贴左，说明text-indent没触发，立刻切到padding-left
真正难的不是写对那行 text-indent: 2em，而是确认它在富文本输出、表格、Flex 容器、打印预览甚至开启 OpenType 标点悬挂（如 font-feature-settings: "halt"）时，依然按预期工作——每个环境都可能悄悄绕过这个属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
