text-indent 是控制段落首行缩进的正确方式，推荐使用 2em；不可用 margin-left 替代，避免语义错位与布局失效；需检查 display 模式、white-space 及样式覆盖问题。

用 text-indent 控制段落首行缩进

HTML 本身没有“段落缩进”语义标签，缩进必须靠 CSS 实现。最常用、最符合排版习惯的方式是用 text-indent 设置首行缩进。

它只影响段落（如 <p>）的第一行，后续行保持左对齐，适合中文出版式排版。

• text-indent 的值可以是像素（2em）、相对单位（2em 推荐，1em ≈ 当前字体大小）或百分比（不常用）
• 别写成 margin-left——那会让整段左移，破坏块级元素默认的文档流对齐
• 如果段落里用了 display: inline-block 或浮动，text-indent 可能失效，先检查 display 模式

为什么 <blockquote> 看起来像缩进了？

浏览器对 <blockquote> 有默认样式（通常是左右 margin），这不是“段落缩进”，而是块容器外边距。它会影响整个引用块，不是首行效果。

如果你只是想让普通段落看起来像引用，不要滥用 <blockquote> —— 语义错位会影响可访问性和 SEO。

Article To Html

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

下载

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

• 想模仿引用效果？用 padding-left + border-left 更可控
• 想缩进多段？给 <p> 批量加 class，比如 <p class="indent">，再统一设 .indent { text-indent: 2em; }

遇到 text-indent 不生效？先查这三件事

常见失效不是代码写错，而是被其他规则覆盖或布局模式冲突。

• 检查是否父容器设置了 text-align: justify 并且内容太短——text-indent 在某些旧版 Safari 中会失效
• 确认段落没被设置 white-space: nowrap 或 display: flex/inline-flex，这些会忽略 text-indent
• 用浏览器开发者工具看 computed 样式，确认 text-indent 值确实应用了，且没被 !important 或更高优先级选择器覆盖

移动端要注意 em 和 rem 的实际表现

在响应式页面里，用 2em 比 32px 更稳妥，但得留意根字体大小变化。如果 <html> 的 font-size 被媒体查询动态改过（比如从 16px 变成 14px），2em 缩进也会变小。

• 追求绝对一致？用 ch 单位（如 2ch ≈ 两个汉字宽度），但兼容性略差（IE 不支持）
• 需要兼容老设备？直接写 text-indent: 32px，并确保字体大小固定（比如强制 font-size: 16px）
• 别用 padding-left 替代 text-indent 来“模拟”首行缩进——它会把第一行文字和左边框一起推远，视觉上不对齐

真正难的不是写那一行 CSS，而是判断该不该缩进、缩多少才符合当前字体、行高和阅读场景。中文段落缩进 2em 是惯例，但若字体是等宽或字号特别小，可能得调到 1.5em 或加个 min-width 配合。别迷信通用值，打开 DevTools 多调几次。