整页布局的gap需按语义区块分层控制：gap仅作用于Flex/Grid容器直接子项，区块间间距用margin；响应式推荐clamp()动态缩放，避免全局统一值导致失衡。
整页布局的 gap 不是统一设一个值就能用到底的——它必须按语义区块分层控制，否则会出现“标题离上边太近、段落挤成一团、页脚粘着内容”这种典型失衡。
为什么不能全局设 gap: 1.5rem？
因为 gap 只在 Flex 或 Grid 容器内生效，且只作用于直接子项之间。你给 body 设 gap 是无效的；而如果强行把整个页面包进一个 display: flex; flex-direction: column 容器里再设 gap，会导致所有区块（包括 header 和 footer）被等距切割，破坏视觉节奏。
常见错误现象：section 内部文字行高正常，但段落之间没空隙；nav 里的菜单项紧贴在一起；手机端 gap 过大导致内容被挤出视口。
- 语义区块之间需要「呼吸感」：比如
header到第一个section通常需要更大间距（margin-bottom: 3rem） - 同级内容组内部需要「紧凑感」：比如技能图标组用
gap: 0.75rem，比段落间距小一半 - 响应式时
gap必须随屏幕缩放调整，不能只靠媒体查询硬切——推荐用clamp(0.5rem, 2vw, 1.25rem)
gap 和 margin 怎么分工？
原则很直白：用 gap 管「容器内子项间隙」，用 margin 管「区块自身与其他区块的距离」。
立即学习“前端免费学习笔记（深入）”；
例如一个个人名片页：
<header class="hero"></header> <section id="skills"></section> <section id="projects"></section> <footer></footer>
这里 header 和 section 是兄弟元素，它们之间的空隙靠 margin-bottom 控制；而 #skills 内部的图标列表，才适合用 display: flex; gap: 0.75rem。
- 别在
section上设gap期望影响它和下一个section的距离——那不是gap的职责 - 如果某个
section内部是 Grid 布局（如项目卡片网格），就用gap控制卡片间距；它的外边距仍由margin负责 - 避免同时对同一元素设
margin和依赖父容器gap——容易叠加出双倍空白
移动端 gap 缩放的实际写法
直接写死 gap: 1rem 在小屏上会撑开太多，尤其当内容本身已占满高度时。更稳妥的方式是用函数动态缩放：
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: clamp(0.5rem, 2.5vw, 1rem);
}
这段代码的意思是：最小 0.5rem（窄屏），最大 1rem（桌面），中间按视口宽度线性过渡。比单纯用 @media (max-width: 768px) { gap: 0.75rem; } 更平滑，也减少断点数量。
-
clamp()兼容性已覆盖 Chrome 88+/Firefox 79+/Safari 13.1+，2026 年可放心用 - 别用
em做gap单位——它会继承父级字体大小，而布局间距不该被文字缩放干扰 - 图标组、按钮组这类紧凑型内联结构，优先用
gap；段落、标题等块级内容分隔，坚持用margin
真正难的不是算数值，而是判断哪里该用 gap、哪里该用 margin、哪里根本不需要额外间距——这取决于你是否把每个 HTML 元素当成有明确语义和边界的角色，而不是一堆待填满的盒子。
