HTML段落标签如何使用CSS属性设置首行缩进与行高

首行缩进必须用text-indent: 2em，行高用无单位line-height（如1.6）；禁用padding/margin模拟缩进或行距；首段重置text-indent: 0和margin-top: 0；失效时查display是否为block及computed值。

直接用 text-indent 控制首行缩进，用 line-height 调整行距——两者分工明确，不混用、不替代。

首行缩进必须用 text-indent

中文段落习惯空两字，text-indent: 2em 是最稳妥的选择。它只影响第一行开头位置，其余行对齐不变，语义清晰且浏览器原生支持。

1. 别用 padding-left 或 margin-left：它们会让整段左移，破坏两端对齐（如 text-align: justify），小屏还容易溢出
2. 2em 比 32px 更可靠：字号放大时缩进同步变宽，适配系统缩放和无障碍设置
3. 确保 <p> 是块级元素：若被设为 inline 或套在 flex/grid 容器里没触发 BFC，text-indent 就不生效

行高用 line-height 统一控制

line-height 决定单行文字的垂直空间，推荐用无单位数值（如 1.6），它会乘以当前字体大小，响应式友好。

1. 避免用 px 固定行高：字号变化后行距会失衡，阅读体验断层
2. 不要靠 margin 或 padding 模拟行距：那是段间距的事，混用易导致行间松散或重叠
3. 搭配 font-family 使用：中文字体如 "Microsoft YaHei" 对行高渲染更稳定

首段通常不缩进也不留顶边距

文章开头第一段常需视觉“起始感”，既不该缩进，也不该和标题挤得太近。

1. 加一条重置规则：p:first-of-type { text-indent: 0; margin-top: 0; }
2. 如果用了类名控制缩进（如 .indent），首段就不用加这个类
3. 富文本编辑器插入的新段落有时自带内联样式覆盖你的 CSS，可用开发者工具看 Computed 值确认最终生效值

常见失效原因与快速排查

写了 text-indent 却没反应？大概率不是代码写错，而是渲染条件不满足。

1. 打开浏览器开发者工具 → 找到目标 <p> → 查看 Computed 标签页里的 display 是否为 block
2. 再点开 text-indent 项，看最终计算值是不是你设的 2em，还是被其他样式覆盖成 0
3. 检查是否误用了 white-space: pre 或 direction: rtl，这些会干扰首行识别逻辑