text-indent 只缩进首行且不改变盒模型宽度，与 padding-left 有本质区别；需清首段 margin-top、用 em 单位、媒体查询降级、避免嵌套双重缩进。
text-indent 不影响元素宽度，但别误用 padding-left
直接用 text-indent 就行——它只移动首行文字的起始位置，不改变 p 元素自身的盒模型尺寸，自然不影响整体宽度。这是它和 padding-left 的本质区别。
常见错误是看到“缩进”就下意识加 padding-left，结果整段左移，容器宽度被撑开（尤其在 box-sizing: border-box 下更隐蔽），还可能破坏 text-align: justify 的对齐逻辑。
-
text-indent: 2em：首行向右挪 2em，第二行仍从原左边界开始，盒宽不变 -
padding-left: 2em：整个p内容区左内边距增加 2em，盒宽 = 内容宽 + 2em（除非box-sizing: border-box且父容器固定宽） - 若已误用
padding-left，又想“视觉上缩进但不扩宽”，只能额外加margin-left: -2em抵消——但这属于 hack，易出错且不可维护
首段不缩进时，如何避免顶部多出空白？
首段常需取消缩进，但很多人只写 text-indent: 0，忘了它默认还有 margin-top，导致页面顶部空一大块。这不是缩进问题，是段间距失控。
浏览器对 p 有默认上下 margin（通常约 1em），首段的 margin-top 没东西可折叠，就会裸露出来。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确做法：
p:first-of-type { margin-top: 0; text-indent: 0; } - 别只清
text-indent：否则首段顶上还是空着，用户第一眼看到的是空白，不是内容 - 如果用了 CSS 重置（如 normalize.css），检查是否已覆盖默认 margin；没重置就更要手动控制
响应式缩进怎么写才不崩？
用 em 单位最稳，但得避开两个坑：一是 rem 配合 JS 动态改根字体大小（比如夜间模式），缩进会跟着跳变；二是 % 基于父容器宽度，窄屏下缩进可能只剩 3px，根本看不出两字符效果。
真实项目里，小屏缩进确实该减，但不是靠百分比“自动适配”，而是用媒体查询主动降级。
- 推荐写法：
p { text-indent: 2em; } @media (max-width: 600px) { p { text-indent: 1.5em; } } - 别用
text-indent: 2%：320px 宽度下仅 6.4px，中文字体里连一个汉字宽度都不够 - 慎用
ch：虽然语义准（1ch ≈ “0” 字宽），但 IE 完全不支持，多数中文字体里1ch远小于一个汉字，实测容易过窄
嵌套段落或 inline 元素里缩进失效？检查 display 和继承
text-indent 只对块级元素生效，但失效原因往往不是“没加”，而是被其他样式干扰了。比如 p 里嵌了个 span 或图标，或者父容器设了 display: flex，都可能让缩进消失。
另一个隐形问题是：它不继承，但子块级元素（如内部再套一个 p）会从父级缩进后的位置开始排布，若没重置，会出现“双重缩进”。
- 确保目标元素是块级：
display: block（默认p就是，但若被 JS 改成inline就失效） - flex 容器里的
p：若父div设了display: flex，p会变成 flex item，text-indent仍有效，但若同时设了align-items: flex-start之类，可能视觉上被遮挡 - 嵌套
p场景（少见但存在）：p > p { text-indent: 0; }，否则子p首行会在父p缩进后的起点再缩进一次
真正难调的不是“怎么缩进”，而是缩进之后，段落间距、首段对齐、响应式断点、嵌套结构这几处容易互相打架。单位选 em、清首段 margin-top、媒体查询主动降级、避开 padding-left 替代方案——这四条漏掉任何一条，都可能让缩进在某个设备或状态下突然失效。
