text-indent 是首行缩进的唯一正解，专用于缩进段落首行而不影响布局；误用 padding/margin 会导致排版错乱；悬挂缩进需 padding-left 与负 text-indent 配合；首段应重置 margin-top 和 text-indent。
text-indent 是首行缩进的唯一正解
想让段落第一行往里缩两个字？别碰 padding-left 或 margin-left，直接上 text-indent。它专为这个场景设计，只影响首行文字位置，不影响段落整体布局。
常见错误现象：用 margin-left: 2em 后发现整段左移、text-align: justify 失效、小屏下文字挤出容器；或者加了 padding-left 导致背景色也跟着缩进，视觉上像“挖掉一块”。
实操建议：
- 单位优先选 2em，字号放大时缩进同步变宽，阅读节奏不突兀
- 避免用 %（依赖父容器宽度，窄屏下缩进可能只剩几像素）
- 别用 rem 做首行缩进——夜间模式或动态改根字体时，缩进会跳变
- 首段通常不缩进：p:first-of-type { text-indent: 0; }
padding 和 margin 管的是完全不同的事
padding 是内容和边框之间的距离，margin 是整个盒子和其他盒子之间的空隙。写错一个，排版就偏一截。
典型误用场景：
- 给按钮文字“留白”却加 margin：文字还是贴着边框，只是按钮整体挪了位置
- 想控制段落之间空隙却用 padding：容器高度被撑大，flex/grid 里对齐全乱
- 两个 <p> 空隙比设的小：大概率是上下 margin 合并了（比如 margin-bottom: 1.2em 和 margin-top: 1.2em 实际只留 1.2em）
实操建议：
- 段间距统一用 margin，例如 p { margin: 1.2em 0; }
- 若需破除 margin 合并，给父容器加 border-top: 1px solid transparent 或 padding-top: 0.1px
- 所有交互类元素（按钮、输入框）的热区大小由 padding 决定，别吝啬——移动端至少保证 44px 高度
悬挂缩进得靠 padding + text-indent 组合实现
参考文献、术语列表这类“首行顶格、其余行缩进”的格式，单靠 text-indent 不行——它只能缩首行。必须配合 padding-left 把整段“推右”，再用负的 text-indent 把首行“拉回”。
立即学习“前端免费学习笔记（深入）”；
示例代码：p.hanging { padding-left: 2em; text-indent: -2em; }
这样首行左边缘对齐原位置，其余行都缩进 2em。
容易踩的坑：
- 忘记设 box-sizing: border-box：加了 padding-left 后容器变宽，响应式断点错位
- 负 text-indent 值大于 padding-left：首行会缩进过度甚至消失在视口外
- 在 display: inline-block 或 float 容器里用悬挂缩进：可能触发新 BFC，导致缩进失效
首段缩进与顶部 margin 必须重置
浏览器默认会给每个 <p> 加上下 margin，首段顶部多出一截空白，看着像“悬空”。这不是 bug，是默认样式行为，但几乎没人想要。
实操建议：
- 强制清除：p:first-of-type { margin-top: 0; text-indent: 0; }
- 如果首段是标题后紧跟的正文，更稳妥的做法是用相邻兄弟选择器：h2 + p { margin-top: 0; text-indent: 0; }
- 别指望全局重置 margin: 0：会破坏所有段落间距逻辑，后续还得手动补 margin-bottom
最常被忽略的一点：缩进单位和 margin 单位混用。比如 text-indent: 2em 配 margin: 16px 0，字号变化时两者缩放不同步，视觉节奏就断了。统一用 em 或 rem（仅限非缩进场景）能少掉一半调试时间。
