text-indent是实现段落首行缩进的正确css属性，仅作用于块级元素首行，推荐值2em或1.5em，需避免误用margin/padding、全局标签选择器及空格模拟，并注意响应式与字体适配。
用 text-indent 控制段落首行缩进
HTML 本身不提供段落缩进语义，必须靠 CSS 的 text-indent 实现。它只作用于块级元素（如 p）的**首行开头**，不影响后续行或整个段落左边界。
常见错误是误用 margin-left 或 padding-left——这会让整段文字左移，破坏对齐，且无法实现“仅首行缩进”的排版意图。
-
text-indent值推荐用2em（中文排版常用，约等于一个汉字宽度）或1.5em（兼顾可读性与紧凑性） - 负值可行（如
-1em），但需配合padding-left防止文字溢出容器 - 对
display: inline元素无效；display: inline-block也不触发
避免缩进影响列表项和标题
全局写 p { text-indent: 2em; } 看似省事，但容易误伤不需要缩进的场景：比如 p 包裹的 ul/ol、说明性标题（h3 后紧跟的 p）、或表格内的 p。
更稳妥的做法是显式加类，例如：
<p class="indent">这是需要首行缩进的正文段落。</p>
再配 CSS：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.indent { text-indent: 2em; }
.indent:first-line { /* 如需特殊首行样式，可在此扩展 */ }
- 不依赖标签名，避免意外继承
- 方便在 Markdown 渲染后通过 class 注入（如 remark 插件加
class="indent"） - 若必须用标签选择器，至少排除嵌套场景：
p:not(.no-indent):not([role="note"]) { text-indent: 2em; }
兼容性与响应式缩进
text-indent 在所有现代浏览器中完全支持，包括 IE9+。但要注意两点现实问题：
- 在小屏幕（如手机）上，
2em可能导致首行缩进过大，挤压正文宽度；建议用媒体查询收紧：@media (max-width: 480px) { .indent { text-indent: 1em; } } - 使用 rem 单位时，若根字体被动态修改（如用户调整系统字号），缩进会同步变化——多数情况是优点，但需确认设计是否允许
- 慎用百分比值（如
text-indent: 5%）：它基于容器宽度计算，窄屏下缩进可能极小甚至为 0
不要用空格或 模拟缩进
硬编码 或全角空格不仅难以维护，还会导致复制粘贴时带多余空白、SEO 文本污染、屏幕阅读器朗读异常（读出“空格空格”）。
更隐蔽的问题是：这些字符参与换行逻辑，可能在断行时出现在行首，造成视觉错位。
- 编辑器里看不见的缩进字符，上线后才发现排版错乱
- Git diff 中大量无意义变更，干扰代码审查
- 服务端渲染（SSR）或静态生成时，模板里混入空格易引发前后端不一致
缩进是样式问题，不是内容问题——交给 CSS 处理是最干净的解法。真正容易被忽略的是：缩进量是否随字体切换动态适配，以及是否在所有嵌套上下文中保持语义一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
