text-indent是专用于块级元素首行缩进的CSS属性，支持正值（如2em右缩进）、负值（实现悬挂缩进），不作用于整段；现代浏览器全支持，但对inline或flex容器无效；推荐用相对单位2em而非px以保障响应式效果。

用 text-indent 控制首行缩进最直接

所有现代浏览器都支持 text-indent，它是专为段落首行缩进设计的 CSS 属性，不会影响其他行。默认值是 0，设成正值（如 2em）就向右缩进，负值则向左“悬挂”。

实操建议：

• 优先用相对单位：2em（相对于当前字体大小）比 32px 更健壮，响应式布局下不易错位
• 对 <p></p> 全局设置即可：

  p { text-indent: 2em; }

• 注意：text-indent 对 display: inline 或 flex 容器无效，只作用于块级或表格单元格等可换行容器

为什么不用 padding-left 或 margin-left

这两个属性会让整段文字（包括第二行、第三行）一起左移，不是“首行缩进”，而是“整体偏移”。尤其在换行多、宽度窄的场景下，视觉上会明显错位，还可能触发意外的水平滚动条。

常见错误现象：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

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

• 段落右侧文字被截断，但开发者以为是容器宽度问题
• 列表项（<li>）加了 padding-left 后，项目符号也跟着移位
• 配合 text-align: justify 使用时，两端对齐失效

需要兼容 IE8 及更老浏览器怎么办

IE8 支持 text-indent，但对百分比值（如 4%）解析不稳定；IE7 及以下不支持 em 在 text-indent 中的计算，推荐降级为 px 值并加条件注释（如果真必须支持）。

更实际的做法：

• 确认目标用户是否还在用 IE7/IE6——绝大多数情况已无需考虑
• 若必须兼容，用固定像素：text-indent: 32px;，并在 加 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 强制最新渲染模式
• 避免混用 text-indent 和 direction: rtl，老 IE 下行为不可靠

遇到首行缩进失效，先检查这三件事

不是代码写错，而是上下文干扰导致的“看起来没生效”：

• 父容器设置了 overflow: hidden 且宽度不足，缩进部分被裁掉（打开开发者工具看盒模型）
• 段落里用了 <span style="display: block;"></span> 或其他强制换行内联元素，打断了文本流，text-indent 失效
• CSS 优先级被覆盖：比如某处写了 p { text-indent: 0; } 且规则位置更靠后，用浏览器调试器的“Computed”面板直接查最终值

真正容易被忽略的是：缩进量要和中文排版习惯匹配。2em 是通用起点，但宋体小字号下可能显小，思源黑体中文字号大时可能显大——得在真实设备上瞄一眼，而不是只信预设值。