text-indent仅对块级元素生效，需确保p标签处于标准块级上下文；推荐使用2em实现中文首行缩进；注意避免margin-top干扰视觉效果。
text-indent 只作用于块级元素，
很多初学者写 文字 被父容器设置了 display: inline 或 display: flex 等非块级显示方式。CSS 规范明确规定：text-indent 仅对生成“块级框”的元素生效。
实操建议：
- 检查父元素是否用了
display: flex/display: grid—— 若是，需给显式加display: block - 避免用
float或position: absolute破坏块格式化上下文（BFC） - 移动端常见坑：某些 UI 框架（如 Ionic、Vant）默认把
套在inline容器里，要 inspect 元素确认 computeddisplay值
缩进值用 em 还是 rem？中文排版推荐 2em
中文段落首行缩进两个汉字宽度是出版惯例。em 相对于当前元素的 font-size，天然适配字体变化；rem 依赖根元素，容易在嵌套字体大小时失准。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 设
text-indent: 2rem后缩进过大——因为根font-size是 16px，2rem = 32px，远超汉字宽度 - 设
text-indent: 32px后响应式失效——固定像素无法随字体缩放
正确写法示例：
这是首行缩进两字符的段落。
若全局统一，建议写在 CSS 中：
p { text-indent: 2em; margin: 0; }
text-indent 对空格、换行、内联元素的行为很“诚实”
它只缩进**第一行盒（line box）的开头**，不改变内容结构。这意味着：
- 段落开头有
text-indent: 2em+ 开头两个 -
- 如果首行包含
、等内联元素，缩进依然从该行最左边缘开始计算 - 遇到
direction: rtl（右向左文本），text-indent缩进方向自动翻转到右侧
首行缩进和段间距别混用：margin-top 会干扰 text-indent 的视觉效果
很多人想“让段落之间有空隙又首行缩进”，于是同时写 margin-top: 1em 和 text-indent: 2em，结果发现缩进看起来偏移了——这是因为 margin-top 把整个块上推，而 text-indent 仍从块左边界算起，视觉上首字位置没变，但段落整体上移，造成错觉。
更稳妥的做法：
- 用
margin-bottom控制段后距（不影响首行定位） - 或统一用
line-height+padding调整垂直节奏 - 若必须用
margin-top，请确认父容器没有overflow: hidden或border截断外边距合并（margin collapse）
真正影响首行缩进感知的，往往不是 text-indent 本身，而是它周边的盒模型行为——这点最容易被忽略。
