空隙过大主因是margin/padding过大、默认样式或外边距合并；应先用开发者工具定位来源，再针对性调整margin、改用gap、重置默认样式或用flex/grid布局优化。
两个模块之间空隙太大，通常是因为 margin 或 padding 设置过大，或存在默认样式、外边距合并（margin collapse）等隐性因素。关键不是“删掉间距”，而是**精准识别来源，再针对性调整**。
先确认空隙来自哪里
用浏览器开发者工具（F12）选中两个模块，观察计算后的盒模型：
- 蓝色区域是 margin —— 属于元素外部，影响与其他元素的距离
- 绿色区域是 padding —— 属于元素内部，撑开内容与边框的距离
- 特别注意：相邻块级元素的垂直 margin 会发生 合并（collapse），实际间距取两者较大值，不是相加
常见原因与对应缩减方法
情况一：模块自身设置了过大的 margin-bottom / margin-top
- 比如：
.module { margin-bottom: 40px; }→ 改为margin-bottom: 16px;或直接设为0 - 若上下模块都有 margin，优先保留其中一个（如只留上模块的
margin-bottom），避免合并不可控
情况二：父容器有 padding 或 margin 干扰
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否设置了
padding: 20px或margin: 30px，这些会整体推远子模块 - 可改用
gap（Flex/Grid 布局中更可控）替代手动 margin
情况三：浏览器默认样式（如 body margin、h 标签 margin）
- 重置基础样式：
body { margin: 0; }、h1, h2, p { margin: 0; } - 或使用轻量 reset（如
* { margin: 0; padding: 0; }），但慎用，避免影响表单等原生体验
推荐更稳健的布局方式
比起逐个调 margin/padding，用现代布局逻辑更省心：
- 用
display: flex父容器 +gap: 12px控制子模块间距（gap不会合并，不干扰 margin） - 用
display: grid+row-gap: 16px同理，语义清晰且响应友好 - 需要兼容老版本？给模块加
overflow: hidden或border: 1px solid transparent可阻止 margin 合并
基本上就这些。空隙大不是 bug，是 CSS 盒模型在“老实干活”。找准源头，删得少、控得准，比盲目清 margin 更可靠。
