text-indent: 2em是最常用且语义正确的首行缩进写法，它随font-size等比缩放、兼容性好、不影响可访问性；需确保p为块级元素，避免在flex/grid子项或inline元素上直接使用。
text-indent: 2em 是最常用且语义正确的写法
直接给 p 元素设置 text-indent: 2em，是中文排版里实现“首行缩进两个汉字”的标准方案。它不依赖额外 HTML 结构，不影响可访问性，复制粘贴也不会带入无意义空格。
关键点在于：2em 的缩进量会随当前 font-size 等比缩放，比如字号从 16px 变成 20px，缩进就从 32px 自动变成 40px，视觉上仍接近两字符宽度。这比写死 32px 或用全角空格更健壮。
- 必须确保
p是块级元素（display: block），否则text-indent不生效 - 避免在
flex或grid容器的直接子元素上硬套text-indent，它们默认不触发块级格式化上下文 - 别用
2ch：虽然语义更贴近“字符”，但 IE 完全不支持，且多数中文字体下1ch远小于一个汉字宽度
Flex/Grid 容器里 text-indent 失效怎么办
这不是 bug，而是 CSS 格式化上下文的天然限制：text-indent 要求元素参与块级布局，而 flex item 和 grid item 默认不生成块级框。
强行加 display: block 可能临时起效，但风险高——如果父容器是 display: flex 且子元素没设 width，width: auto 会导致退化行为，缩进依然消失。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 首选方案：改用
padding-left: 2em，它不依赖“首行”语义，对任何布局都生效，视觉效果几乎一致 - 若必须保留
text-indent（如对接旧打印样式），需同时满足三个条件：display: block、width不为auto、父容器触发 BFC（例如加overflow: hidden） - 别在导航菜单、卡片标题这类本就不该有段落语义的地方硬套
text-indent——那是间距问题，该用margin-left或padding-left
为什么加了 text-indent 却没缩进
不是代码写错了，而是渲染前提没满足。最快验证方式是打开开发者工具 → 查看目标 p 的 Computed 标签页 → 确认 display 是 block，且 text-indent 最终值不是 0。
-
p被设成display: inline或inline-block：浏览器根本不识别“首行”概念 - 段落开头是
<img>或<svg>：缩进发生在该内联替换元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }（常见于富文本编辑器输出） - 用了
white-space: nowrap或white-space: pre：破坏换行，“首行”失去意义 -
direction: rtl或writing-mode: vertical-rl：会反转缩进方向，需配合text-align调整
响应式场景下缩进容易被忽略的细节
当页面启用动态字体缩放（比如 html { font-size: 4vw }）、夜间模式（JS 动态改 rem 基准）或系统级放大时，text-indent: 2em 会跟着变——这是优势，但前提是逻辑合理。
- 小屏下
4vw可能让字号骤降到 12px，2em = 24px就远超一个汉字宽度，建议加限制：html { font-size: max(16px, 4vw) } - iOS Safari 在
flex容器内对text-indent渲染偶有延迟，可加transform: translateZ(0)强制硬件加速 - 微信 X5 内核对
position: absolute元素上的text-indent支持不稳定，尽量避开 - 别混用
em和rem：若根字体缩放，text-indent: 2rem会意外跳变，破坏段首对齐节奏
