text-indent专管首行缩进，margin控制段间距，line-height调节行距，三者职责分明；用padding-left或margin-left会导致整段偏移、破坏对齐、响应式失效；推荐text-indent: 2em，line-height: 1.6（无单位），p:first-of-type需重置缩进与上边距。
直接用 text-indent 控制首行缩进，用 margin 和 line-height 分别管段间距和行距——三者职责分明，混用反而容易出错。
为什么不能用 padding-left 或 margin-left 实现首行缩进
它们会让整段文字左移，不是“首行缩进”，而是“整段偏移”。后果包括：
- 破坏文本对齐（比如
text-align: justify会失效） - 响应式布局下缩进值固定，小屏时可能溢出容器
- 与父容器的
padding或border叠加，造成意外交互 - 若段落内含
display: inline-block子元素（如图标、按钮），margin-left还可能触发新的 BFC，让首行缩进完全不生效
text-indent 的单位选 em 还是 px？
优先用 2em，原因很实在：
-
em是相对于当前字体大小的单位，字号放大时缩进同步变宽，适配阅读习惯 -
px固定死在 32px 或 20px，字号调大后缩进就显得太小，用户 zoom 页面时易错位 - 避免用
%：它基于包含块宽度，窄屏下缩进可能过大（比如 2% 在 320px 宽度下仅 6.4px，远不够两字符） -
rem理论上可行，但依赖html根元素字体设置，若项目中动态改过font-size（如夜间模式），rem缩进会意外跳变
段落间距用 margin，别碰 padding
margin 控制段与段之间的空隙，padding 是段落内部留白——这是关键分界：
立即学习“前端免费学习笔记（深入）”；
- 设
p { margin: 1.2em 0; }能稳定控制上下间距，且浏览器默认 margin 折叠行为可预测 - 用
padding模拟段距会撑大容器高度，还可能和 border 冲突，尤其在 flex / grid 布局里引发对齐偏差 - 首段通常不该缩进，也常需去掉顶部 margin：
p:first-of-type { margin-top: 0; text-indent: 0; } - 富文本编辑器输出的
p常带内联style，若覆盖不了text-indent，得用p[style] { text-indent: 2em !important; }强制生效
line-height 设多少才舒服
数值推荐 1.5～1.75，无单位，别写 px：
- 无单位值是相对于自身字体大小的倍数，继承安全；写成
24px会导致子元素（如span）行高被强制锁定 - 中文排版下
1.6是较通用的平衡点：太小（1.2）字挤，太大（2.0）行间空洞感强 - 若段落含
vertical-align: middle的内联元素（如图标），line-height还会影响其垂直居中基准线，需额外测试
真正麻烦的不是写几行 CSS，而是缩进和间距的组合效果在不同字号、不同设备、不同富文本来源下是否稳定——text-indent 和 margin 必须解耦定义，且第一段、引用段、标题后段要单独排除，这些细节漏掉一个，视觉节奏就断了。
