最快方法是直接修改 margin 或 padding，但需先用开发者工具定位真实生效的间距来源，常见原因包括元素默认 margin、父容器 gap 设置及外边距合并；优先使用 Flex/Grid 的 gap 控制布局间距。
直接改 margin 或 padding 最快，但得先分清是哪个元素在撑开间距
多数人调半天没效果，是因为改错了目标：你以为是 section 之间有空隙，实际可能是内部 h2 的 margin-bottom 在顶开下一块，或是父容器用了 gap（Flex/Grid 布局）。先用浏览器开发者工具（F12）点选对应板块，看右侧 Computed 面板里真正生效的 margin、padding、gap 值。
常见情况包括：
-
section自身带默认margin-bottom: 2em（尤其从某些模板继承的重置 CSS） - 使用
display: flex的容器设置了gap: 2rem，整个布局间距被统一控制 - 标题（如
h2）自带浏览器默认margin-top/margin-bottom，会“溢出”到板块外影响视觉间距
Flex/Grid 容器里的 gap 比 margin 更干净，优先用它
如果板块是子元素，且父容器已设 display: flex 或 display: grid，直接在父容器上加 gap 是最可控的方式——它不干扰单个板块的盒模型，也不会引发外边距合并（margin collapse）问题。
/* 父容器，比如 .main-content */
.main-content {
display: flex;
flex-direction: column;
gap: 1.5rem; /* 所有相邻子板块间统一留白 */
}注意：gap 在旧版 Safari（margin-bottom；但现代 HTML5 模板基本可放心用。
立即学习“前端免费学习笔记（深入）”；
用 margin 调整单个板块时，避免用 margin-bottom 和 margin-top 同时设
比如给每个 section 同时写 margin-top: 1rem; margin-bottom: 1rem;，会导致首尾多出一倍空白，且相邻 margin 会合并（两个 1rem 合并成一个 1rem，而非 2rem），结果难预测。
更稳妥的做法：
- 只设
margin-bottom（适用于从上往下流式布局） - 最后一项用
:last-child清掉多余底部间距：section:last-child { margin-bottom: 0; } - 或者统一用
margin-block-end（逻辑属性，兼容性稍差但语义清晰）
别忽略 CSS 重置或框架自带的全局间距规则
很多 HTML5 模板基于 Normalize.css、Reboot（Bootstrap）、或 Tailwind 的 @layer base，它们会统一重置标题、段落、列表的 margin。你手动加的 margin 可能被覆盖，或和已有规则叠加出意外高度。
检查方式：
- 在开发者工具中看样式是否被划掉（表示被更高优先级规则覆盖）
- 搜索项目中是否有
h2, h3, p, ul等选择器带margin声明 - 如果是 Tailwind 模板，确认是否启用了
preflight，它会给h2默认margin-top: 1em
真正要调准板块间距，往往不是加一行 CSS 就完事，而是得顺着现有 CSS 层级理清楚：哪一层定义了基础留白，哪一层允许覆盖，哪一层用了逻辑属性或自定义属性（比如 --section-gap: 2rem）。
