用 margin 控制段落上下间距最可靠，因其直接修改浏览器默认的 margin-top 和 margin-bottom，通用性强、不影响行高与字体渲染，且可单独设置；line-height 仅影响段内行距，gap 适用于 Flex/Grid 容器但不兼容 IE，而 或空 则破坏语义且不可控。
用 margin 控制段落上下间距最可靠
HTML 本身没有“段落间距”这个独立属性， 标签的默认间距来自浏览器内置样式表，本质就是 margin-top 和 margin-bottom。直接改这两个值，是最通用、最可控的方式。
- 所有现代浏览器都支持，包括移动端 WebView
- 不会影响行高（
line-height）或字体渲染 - 可单独设置上/下边距，比如只加大段落之间空隙，不碰首段顶部或末段底部
- 避免用
padding替代：它会撑大元素自身盒模型，可能意外触发滚动条或遮挡背景
p {
margin-top: 16px;
margin-bottom: 24px;
}
line-height 只调行内间距，不是段落间距
很多人误以为调 line-height 能拉开段落距离，其实它只作用于同一 内部的行与行之间。两个相邻 的距离，仍由它们各自的 margin-bottom 和 margin-top 决定（且会发生外边距合并）。
- 设
line-height: 2后，段内文字行距变大，但段与段之间视觉空隙几乎不变 - 若同时设了
margin和line-height，后者不影响前者计算 - 注意外边距合并：连续两个
的margin-bottom: 20px和margin-top: 20px实际只显示 20px，不是 40px
用 gap 配合 Flex/Grid 容器统一管理多个段落
当多个 被包裹在 display: flex 或 display: grid 的容器中时，可以用 gap 属性一次性控制它们之间的间距，绕过外边距合并问题，也更语义清晰。
- 适用于文章摘要列表、卡片内多段文字、响应式布局等场景
-
gap值不会和子元素的margin叠加，行为可预测 - 不支持 IE，如需兼容老版本，得回退到
margin方案
.paragraphs-container {
display: flex;
flex-direction: column;
gap: 28px;
}
慎用
这类写法看似简单，实则破坏结构语义、增加维护成本，且在不同缩放比例或屏幕尺寸下表现不稳定。
立即学习“前端免费学习笔记（深入）”；
-
- 空
会产生不可控的默认margin，还可能被 CSS 重置规则意外影响 - 响应式断点切换时，手动空行无法随布局自适应，而
margin或gap可配合媒体查询动态调整
margin 就能干净解决；复杂布局再考虑 gap。最容易被忽略的是外边距合并行为——它会让两个段落的间距“看起来没生效”，调试时先检查 computed styles 里的 actual margin 值，而不是只看写的 CSS。 
