margin-bottom 比 line-height 更适合控制段落间距，因 line-height 影响行内基线距离而非段落间空白，而 margin-bottom 精准控制块级元素尾部到下一元素顶部的距离，且不干扰文本渲染、更利于可访问性与响应式设计。
margin-bottom 为什么比 line-height 更适合控制段落间距
因为 line-height 调整的是行内文字的基线距离，它影响的是段落内部的行间距，而不是段落与段落之间的空白；而 margin-bottom 直接作用于块级元素（如 p）的外边距，精准控制段落尾部到下一个块元素顶部的距离。
- 用
line-height拉大段落间距，会导致单行段落看起来“上下留白不均”，甚至撑高容器高度 -
margin-bottom不干扰文本渲染逻辑，对可访问性、打印样式、响应式断点更友好 - 当段落后面紧跟标题（
h2）、图片或按钮时，margin-bottom的视觉节奏更可控
给 p 设置 margin-bottom 的常见错误写法
直接全局重置 p { margin-bottom: 1em; } 看似简单，但容易在嵌套、列表、表单等场景中引发意外空白。
- 列表项里的
p（如li > p）会叠加父级ul/ol的默认 margin，造成双倍空隙 - 文章末尾的
p仍保留margin-bottom，导致页面底部多出无意义空白 - 响应式切换时，固定像素值（如
24px）在小屏下显得过大，而未配合margin-top清除上一个元素的 bottom margin，可能造成“间距翻倍”
更稳妥的段落间距方案：使用相邻兄弟选择器
与其给每个 p 都设 margin-bottom，不如只给「后面还有段落」的 p 加间距，末尾自然收住。
code
p + p {
margin-top: 1.2em;
}
- 这样所有连续段落之间都有统一间隙，但首段无上边距、末段无下边距，避免溢出
- 用
margin-top而非margin-bottom是为了利用 CSS 外边距合并（margin collapse）特性，在多数布局中更稳定 - 如果内容来自 CMS 或富文本编辑器，建议额外加一条：
p:first-of-type { margin-top: 0; }，防止首段顶到容器边缘
移动端和长文排版中需要特别注意的兼容点
某些老版本 Safari 和微信内置浏览器对 rem 单位下的 margin 计算有细微偏差，且长文里大量段落叠加后，滚动性能可能受间接影响。
- 避免用
vh或动态 calc()（如calc(1rem + 2px)）作为margin-bottom值，部分 Android WebView 会触发重排抖动 - 若段落内含图片或 iframe，记得检查它们是否设置了
display: block，否则可能因默认 inline 行内行为导致margin不生效 - 使用
margin-bottom: 0重置某些 UI 库（如 Ant Design、Element Plus）自带的p样式，再统一接管，否则容易被覆盖
实际项目里，段落间距不是数值问题，而是上下文感知问题——同一组 p 在卡片里、模态框里、文章正文里，该有的间隙大小和合并逻辑都不一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
