text-indent 可直接在 标签 style 中设置实现首行缩进，单位必须明确（如 2em），禁用无单位值；不可误用 margin-left/padding-left；2em 是中文排版最稳妥取值；失效常见原因包括 display 非块级、text-align: justify 干扰或样式被覆盖。
用 text-indent 直接缩进段落首行
直接在 <p></p> 标签的 style 属性里写 text-indent 就能生效，不需要额外包裹或 hack。注意单位必须明确——2em、20px、1.5rem 都可以，但写成 text-indent: 2（缺单位）会完全无效。
常见错误是误用 margin-left 或 padding-left：它们会让整段左移，不是“首行缩进”，还会破坏文本流对齐，尤其在响应式布局里容易引发换行错位。
-
text-indent只影响第一行，后续行保持左对齐 - 负值（如
text-indent: -1em）可用于悬挂缩进，但需配合padding-left防止文字被裁切 - 百分比值（如
text-indent: 5%）相对父容器宽度计算，动态缩进但不易控精度
中文场景下 2em 是最稳妥的取值
中文字体通常等宽，2em 基本等于两个汉字宽度，视觉上自然；用 px（比如 32px）在高 DPI 屏或缩放时可能失准；rem 虽可响应，但依赖根字体大小，若未重置 html 的 font-size，默认 16px 下 2rem 实际也是 32px，反而不如直接用 2em 简洁可靠。
示例：<p style="text-indent: 2em;">这是一段有首行缩进的中文文本</p>
遇到缩进不生效？先检查这三个地方
明明写了 text-indent 却没效果，大概率是以下原因之一：
- 该
<p></p>元素设置了display: inline或display: inline-block——text-indent对非块级元素无效 - 父容器设置了
text-align: justify且内容太短，浏览器自动取消缩进以避免空白过大（可加 - CSS 优先级被其他样式覆盖，比如外部样式表里同选择器定义了
text-indent: 0，用浏览器开发者工具看 computed styles 最直接
要不要用 ::first-line 伪元素？没必要
有人想用 p::first-line { text-indent: 2em; }，但这是错的：::first-line 作用于首行的**内容样式**（如颜色、字体），不能改变盒模型位置；text-indent 必须作用于块容器本身。强行套用不仅无效，还可能干扰其他首行样式规则。
真正需要复杂控制（比如段前空两格+首字下沉）才考虑组合方案，日常排版，老老实实写 text-indent 就够了。
别忘了：缩进是排版细节，但 text-indent 的行为在所有现代浏览器里一致，唯一容易翻车的地方，就是单位漏写、display 类型不对、或者被更高优先级样式悄悄覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
