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