用 margin 调整段落上下间距最直接，浏览器默认为 设置 margin-top 和 margin-bottom（约 1em），应直接覆盖而非误用 padding、line-height 或 height；需注意首末段清除多余 margin，line-height 仅影响行高而非段距；flex/grid 容器中可用 gap 替代 margin（需降级处理）；推荐使用 rem/em 等相对单位保障响应式与可访问性。
用 margin 调整段落上下间距最直接
浏览器默认会给 <p></p> 元素加 margin-top 和 margin-bottom，通常是 1em 左右。想改间距，就直接覆盖它——别碰 padding 或 line-height，那不是控制段落之间距离的。
常见错误是只设 margin-top，结果段落堆叠时出现双倍空白；或者用 height 强制拉高，反而破坏流式布局。
- 统一控制所有段落：
p { margin: 0.8em 0; } - 只调某一段下方空隙：
.intro p { margin-bottom: 1.2em; } - 消除首段顶部空白、末段底部空白：
.content p:first-child { margin-top: 0; }<br>.content p:last-child { margin-bottom: 0; }
line-height 不是段落间距，别混用
line-height 控制的是**行内文字的行高**，影响的是同一段落里多行文字之间的垂直距离，和段落与段落之间的间隙无关。设成 2 或 24px，只是让段内换行更松散，但两个 <p></p> 标签之间还是靠 margin 隔开。
容易踩的坑：在 CSS 重置中盲目把 line-height 设成 1，结果段内文字挤成一团，还误以为“段距变小了”——其实段距根本没动。
- 段内可读性优化：
p { line-height: 1.6; } - 段间距离调整仍需：
p { margin: 1em 0; } - 若用
display: inline-block等非块级方式排版，line-height可能间接影响垂直对齐，但那是另一回事
用 gap 替代 margin 的前提是容器是 Flex 或 Grid
如果段落被包在 <div class="stack"> 里，且你给这个容器设了 <code>display: flex; flex-direction: column;，那就可以用 gap 统一控制子元素（包括 <p></p>）之间的间距，比逐个写 margin 更干净。
但注意：gap 在 display: block 容器里完全无效，也不是所有老浏览器都支持（IE 全不支持，iOS Safari 14.5+ 才稳定）。
- 安全写法（带降级）：
.stack { display: flex; flex-direction: column; gap: 1.2em; }<br>.stack p { margin: 0; } /* 清掉默认 margin，避免叠加 */ - 不支持
gap的环境会回落到无间距状态，所以必须配margin降级或用 @supports 检测 - Grid 布局同理，但别对单列
<p></p>直接设display: grid——没必要，还增加渲染开销
用 rem 或 em 而不是 px 更适应响应式
段落间距用固定 px 值（比如 margin: 16px 0）在缩放字体或切换设备时容易失衡。用相对单位才能随根字号或父级字号自动缩放，尤其在用户启用“大字体模式”或使用屏幕阅读器时更友好。
常见误区是以为 em 总是相对于父元素字体大小——其实 margin 中的 em 是相对于当前元素的 font-size，而 rem 才是相对于 :root。两者都比 px 更可控。
- 推荐写法：
p { margin: 1.2rem 0; } - 若需跟随段落自身字号变化（如标题级
<p class="lead"></p>），可用em：.lead { font-size: 1.25rem; margin: 1.5em 0; } - 避免混合单位，比如
margin: 1rem 0 16px——计算混乱，维护困难
段落间距看着简单，真正难的是在不同字体大小、缩放比例、嵌套层级和兼容性要求下保持一致感。很多人调完发现移动端挤在一起，或高对比度模式下空白消失，问题往往出在单位选错、重置不彻底，或者忘了 flex 容器里 margin 和 gap 会打架。
