text-indent是唯一能统一控制段落首行缩进的CSS属性；它仅作用于块级元素第一行，推荐用2em单位以适配字体大小、保障可访问性与响应式效果，需确保元素为block且排除flex/grid干扰及white-space等冲突。

text-indent 是唯一能统一控制段落首行缩进的 CSS 属性，其他方式（如  、嵌套 <div>、<pre>）要么语义错误，要么不可维护，要么在响应式场景下失效。

为什么直接写    不算真正“统一”

连写两个   看似简单，但实际带来三个硬伤：

• 屏幕阅读器会把它读作“空格、空格”，影响可访问性
• 复制粘贴时容易被编辑器过滤或转义成单个普通空格
• 字体放大、系统缩放或高 DPI 屏幕下，视觉缩进量不随字号变化，中文常显过窄（比如 12px 字体下仅约 16px 宽）

text-indent: 2em 才是可靠统一方案

这个写法能自动适配字体大小，且被所有现代浏览器原生支持。关键点在于：

• 2em 表示当前 font-size 的两倍，16px 字体下就是 32px，24px 字体下就是 48px，始终接近“两个汉字宽度”
• 只作用于第一行，不影响段落内换行后的对齐
• 必须确保目标元素是块级（display: block），inline 或 flex 容器里的 <p> 会直接失效
• 若页面有首段不缩进需求（如导语），用 p:first-of-type { text-indent: 0; } 主动排除，比全局设 0 更安全

避免缩进被意外覆盖的常见坑

即使写了 text-indent: 2em，也可能没效果，原因通常是：

Article To Html

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

下载

立即学习“前端免费学习笔记（深入）”；

• 富文本编辑器输出的 HTML 带了 !important 覆盖，比如 p { text-indent: 0 !important; }
• 父容器用了 display: flex 或 display: grid，导致子 <p> 的盒模型行为改变
• 段落开头是 <img> 或 <svg>，缩进发生在该内联替换元素左侧，视觉上“看不见”
• 设置了 white-space: nowrap，让整段变成单行，“首行”概念消失

调试时直接打开开发者工具，看 Computed 面板里 text-indent 的最终值是否生效、display 是否为 block，比反复改样式更快。

真正统一缩进，不靠手敲空格，也不靠工具一键生成——而是靠一条明确的 CSS 规则 + 对它生效边界的清醒认知。一旦父容器布局变了、元素显示模式变了、甚至只是加了个 !important，缩进就可能当场消失，这点最容易被忽略。