text-indent 是控制段落首行缩进的正确方式，推荐使用 2em；不可用 margin-left 替代，避免语义错位与布局失效；需检查 display 模式、white-space 及样式覆盖问题。
用 text-indent 控制段落首行缩进
HTML 本身没有“段落缩进”语义标签，缩进必须靠 CSS 实现。最常用、最符合排版习惯的方式是用 text-indent 设置首行缩进。
它只影响段落（如 <p></p>）的第一行，后续行保持左对齐，适合中文出版式排版。
-
text-indent的值可以是像素（2em）、相对单位（2em推荐，1em ≈ 当前字体大小）或百分比（不常用） - 别写成
margin-left——那会让整段左移，破坏块级元素默认的文档流对齐 - 如果段落里用了
display: inline-block或浮动，text-indent可能失效，先检查 display 模式
为什么 <blockquote></blockquote> 看起来像缩进了？
浏览器对 <blockquote></blockquote> 有默认样式（通常是左右 margin），这不是“段落缩进”，而是块容器外边距。它会影响整个引用块，不是首行效果。
如果你只是想让普通段落看起来像引用，不要滥用 <blockquote></blockquote> —— 语义错位会影响可访问性和 SEO。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想模仿引用效果？用
padding-left+border-left更可控 - 想缩进多段？给
<p></p>批量加 class，比如<p class="indent"></p>，再统一设.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 更稳妥，但得留意根字体大小变化。如果 的 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 多调几次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
