最稳方式是只设margin-bottom并清首段margin-top；因垂直外边距会合并，单向控制可避免误判，语义清晰、行为可预测，且line-height不影响段落间距。
直接设 margin-bottom 并清掉首段 margin-top，是最稳、最可控的方式。浏览器默认给每个 p 加了约 1em 的上下外边距，不是“空格”，是外边距；想缩小，就覆盖它，别碰 line-height 或 padding。
为什么只改 margin-bottom 而不碰 margin-top？
连续多个 p 元素的垂直 margin 会合并（取较大值），只设 margin-top 容易误判效果，还可能让首段顶不住上文。统一设 margin-bottom，语义清晰、行为可预测：
-
p { margin-bottom: 0.8rem; }—— 所有段落下方留空，第一个自然贴顶 -
p:first-child { margin-top: 0; }—— 防止父容器或前序内容带来意外顶部空白 -
p:last-child { margin-bottom: 0; }—— 避免末段多出一截空白
line-height 调小了，段落之间还是那么大？
对，line-height 只影响段落内部的行与行之间距离，和段落与段落之间的空隙完全无关。设成 line-height: 1，只是让段内文字挤在一起，两个 p 标签之间的视觉距离仍由 margin-bottom 和 margin-top 决定。
容易踩的坑：
- 在 CSS 重置里盲目写
line-height: 1，结果段内文字重叠，还误以为“段距变小了” - 用
line-height: 20px这类固定像素值，子元素字体变大时行高卡死，推荐无单位数值：line-height: 1.5
用 gap 替代 margin 真的更干净吗？
仅当 p 被包在 display: flex 或 display: grid 容器里时，gap 才生效。它能绕过外边距合并问题，但不兼容 IE，iOS Safari 14.5 之前也不稳定。
安全写法必须带降级：
- 先清默认
margin：.stack p { margin: 0; } - 再设
gap：.stack { display: flex; flex-direction: column; gap: 0.8rem; } - 不支持
gap的环境会回落到零间距，所以得补一层@supports (gap: 1rem) { }检测，或直接 fallback 到margin
响应式和兼容性要注意什么？
用 rem 或 em 单位比 px 更健壮，适配缩放和可访问性设置。但若需兼容 IE8 或老 WebView：
- 改用
em或固定px（如margin-bottom: 12px） - 避免
:first-child/:last-child—— IE8 不支持 - 别依赖
margin合并行为做布局，它在不同浏览器中表现略有差异
真正难调的从来不是数值本身，而是没意识到：首段顶部空白常来自父容器的 padding 或 margin，末段底部空白可能被 body 默认样式拖累，调试时得一层层往上查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
