根本原因是浏览器默认样式与自定义margin冲突导致外边距合并混乱；应统一用margin-bottom单向控制、重置默认样式、基于行高设定rem间距比例，并用CSS变量管理间距。
标题和段落之间间距不统一，根本原因常是浏览器默认样式 + 自定义 margin 冲突，尤其 margin-top 和 margin-bottom 混用导致“双倍外边距”或视觉断层。解决关键不是单独调某个值，而是建立一套可复用的垂直节奏规则。
用 margin-bottom 单向控制块级元素间距
只给标题、段落、列表等块级元素设置 margin-bottom，不设 margin-top（除非特殊场景）。这样能避免相邻元素的上下 margin 合并（margin collapse）带来的不可控间隙。
- 例如：
h1, h2, h3, p, ul, ol { margin: 0 0 1.5rem 0; } - 后续元素自然承接上一个元素的底部留白，节奏清晰
- 容器最末尾元素不会多出多余空白（因为没设 bottom margin 的“后遗症”）
定义基础行高与间距比例（推荐 rem + 基准值）
以字体大小为基准（如根元素 font-size: 16px），用 rem 统一控制。常见做法是让 margin-bottom 等于 1–1.5 倍行高（line-height）。
- 设定
body { line-height: 1.5; }→ 对应1.5rem间距较协调 - 标题可递进：
h1 { margin-bottom: 2rem; }，h2 { margin-bottom: 1.75rem; }，p { margin-bottom: 1.25rem; } - 所有数值基于同一 scale，缩放时自动适配
重置默认样式，再统一出发
浏览器对 h1–h6、p、ul 等有不同默认 margin，直接覆盖比微调更可靠。
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 开头加入：
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote { margin: 0 0 1.25rem 0; } - 再按语义单独增强：如
h2 { margin-bottom: 1.75rem; font-weight: 700; } - 避免写
h2 { margin-top: 0.5rem; margin-bottom: 1rem; }这类双向声明
用 CSS 自定义属性管理间距变量（进阶推荐）
把常用间距抽成变量，提升可维护性，也方便主题切换或响应式调整。
:root { --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.25rem; --space-lg: 1.75rem; }-
h2 { margin-bottom: var(--space-lg); }，p { margin-bottom: var(--space-md); } - 媒体查询中可统一改
--space-md值，全站响应式缩放
基本上就这些。不复杂但容易忽略——统一靠 bottom、清空默认、用比例、管住变量。跑一遍重置+单向 margin，标题和段落的呼吸感立马稳了。
