用 margin 控制段落上下间距最可靠，浏览器默认给 p 设 margin-top 和 margin-bottom（各约 1em），应统一设 margin-bottom 并配合 :first-child/:last-child 清除首尾多余空白，避免 margin 合并；line-height 仅影响行高，与段距无关；gap 仅在 flex/grid 容器中生效且需降级处理。
直接用 margin 控制段落上下间距最可靠
浏览器默认给 p 元素设了 margin-top 和 margin-bottom（各约 1em），这就是你看到的“段距”。想改，就直接覆盖它——别碰 padding 或 line-height，那不是干这个的。
常见错误是只写 margin-top，结果相邻两个 p 的垂直 margin 会合并（取较大值），但视觉上容易误判为“没生效”或“空隙变大”；更稳妥的做法是统一设 margin-bottom，让第一个段落自然顶到上文：
-
p { margin-bottom: 1.2rem; }—— 推荐写法，语义清晰、易维护 - 若需兼容老浏览器（如 IE8），改用
margin-bottom: 16px; - 所有段落都加
margin-bottom后，用p:first-child { margin-top: 0; }去掉首段顶部空白 - 同理，
p:last-child { margin-bottom: 0; }避免末段多出空白
别把 line-height 当段距用
line-height 控制的是单个 p 内部多行文字的行高，和段落与段落之间的距离完全无关。设成 2 或 24px，只是让段内换行更松散，两个 p 标签之间还是靠 margin 隔开。
容易踩的坑：
- 在 CSS 重置里盲目把
line-height设成1，结果段内文字挤成一团，还误以为“段距变小了”——其实段距根本没动 - 用像素值（如
line-height: 20px）导致子元素字体变大时行高卡死，推荐无单位数值：line-height: 1.6; - 中文正文常用
1.5～1.8，英文可略低（1.4～1.6）
用 gap 替代 margin 的前提很明确
只有当 p 被包在 display: flex 或 display: grid 容器里时，gap 才能生效。它比逐个写 margin 更干净，但不支持降级——IE 全不支持，iOS Safari 14.5+ 才稳定。
安全写法（带降级）：
- 先清掉默认
margin：.stack p { margin: 0; } - 再设容器
gap：.stack { display: flex; flex-direction: column; gap: 1.2em; } - 不支持
gap的环境会回落到无间距，所以必须配@supports (gap: 1em) { ... }检测，或直接 fallback 到margin
清除浏览器默认样式要小心 margin 合并
很多人一上来就写 p { margin: 0; }，以为万事大吉。但实际调试时发现：连续多个 p 并没有真正“紧贴”，或者顶部/底部仍有意外空白——问题常出在没考虑 margin 合并行为，或父容器有默认 margin / padding。
真正麻烦的不是怎么设间距，而是忘记检查这些点：
- 是否用了
normalize.css或reset？不同浏览器对p的默认margin值并不一致 -
:first-child和:last-child只对直系子元素有效；如果中间夹着h2或div，得换用:first-of-type/:last-of-type - 移动端段落间距突然变大？可能是
viewport缩放或根字体大小变化，导致rem值被放大
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
