应先用开发者工具（F12）点选板块，查看Computed面板中margin-top/margin-bottom、gap及body或section的padding值，确认真实间距来源；再针对性调整，避免因外边距合并、父容器溢出控制或盒模型计算导致修改无效。
直接改 margin 或 padding 很快出效果，但多数人调半天没变化，是因为没搞清间距到底来自哪一层——它可能根本不是你选中的那个元素在撑开空间。
怎么快速定位真实生效的间距来源
打开浏览器开发者工具（F12），用选择器点中你认为“有空隙”的板块，重点看右侧 Computed 面板里的这几个值：
-
margin-top/margin-bottom：尤其是h1、h2、p这类块级元素自带的默认外边距，常会“溢出”父容器，造成板块间意外留白 -
gap：如果父容器是display: flex或display: grid，那整个子项间距大概率由它的gap控制，改子元素的margin没用 -
paddingonbodyorsection：某些 HTML 模板会在body上设padding: 20px，或给每个section加margin-bottom: 2em，这类全局规则优先级高，容易被忽略
为什么改了 margin 却没反应
常见原因不是代码写错，而是 CSS 层叠或盒模型计算逻辑在起作用：
-
margin-collapse（外边距合并）：相邻块级元素的垂直margin会取较大值，而不是相加。比如上元素margin-bottom: 30px，下元素margin-top: 20px，实际间距只有 30px - 父容器设置了
overflow: hidden或display: flow-root，会阻止子元素margin溢出，导致你看到的“空隙”其实是父容器自身的padding - 用了
box-sizing: content-box（默认），又同时设了width+padding+border，结果元素被挤出容器，看起来像“多了一截空白”
用 box-sizing: border-box 统一控制尺寸
这是最省心的起点——它让 width 和 height 包含 padding 和 border，避免尺寸失控：
* {
box-sizing: border-box;
}
这样之后：
- 设
width: 300px; padding: 20px; border: 2px solid #ccc;，元素总宽就是 300px，内容区自动缩为 256px - 所有容器、卡片、按钮都能按“所见即所得”方式设置尺寸，不用反复心算加减
- 特别适合响应式模板：配合
max-width和padding，能保证内边距随视口缩放，不破坏布局
优先用 gap 而不是 margin 控制子项间距
如果你的板块是 Flex 或 Grid 的直接子元素，别碰单个子项的 margin：
- 在父容器上加
gap: 1.5rem，干净、无合并、不干扰子项自身盒模型 -
gap不会触发外边距合并，也不会被父容器overflow截断 - 支持响应式：
@media (max-width: 768px) { .container { gap: 1rem; } } - 注意：IE 不支持
gap，如需兼容，退回到margin并手动处理合并问题
真正难的不是写对某一行 CSS，而是判断哪一层在主导间距——有时候删掉一行 h2 { margin-bottom: 1.5em } 就比加十行 margin 更有效。别急着调数字，先用开发者工具盯住 Computed 面板里的真实值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
