完成HTML文本的段落缩进与行间距控制_借助p标签与CSS样式

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 必须解耦定义，且第一段、引用段、标题后段要单独排除，这些细节漏掉一个，视觉节奏就断了。