根本原因是未区分“元素自身留白”（padding）与“元素对外距离”（margin）：padding影响背景/边框范围，margin不参与自身渲染且会合并；应统一用margin-bottom单向控制或改用gap、padding，并通过CSS变量规范间距。
为什么 margin 和 padding 经常混用导致间距错乱
根本原因是没区分「元素自身留白」和「元素对外距离」： padding 是内容到边框的内距，影响背景色/边框范围；margin 是边框到其他元素的外距，不参与自身渲染。初学者常把按钮上下留空全用 margin，结果父子嵌套时发生外边距合并（margin collapse），实际间距变成一半。
- 列表项
li套div后突然多出 24px 空隙？大概率是父ul默认margin-bottom和子div的margin-top合并了 - 卡片内文字紧贴顶部？可能误用了
margin-top而非padding-top，导致背景色无法覆盖文字上方区域 - Flex 容器里子元素
margin-right在最后一项也生效，造成右侧溢出？该用gap替代
用 CSS 自定义属性统一控制基础间距单位
硬编码 margin: 16px 到处都是，改一个值要搜十次。直接在 :root 定义语义化间距变量，后续所有组件按比例调用：
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
}
.card {
padding: var(--space-md);
}
.button-group > button:not(:last-child) {
margin-right: var(--space-sm);
}
注意：别用 rem 或 em 做间距基准——它们随字体缩放，而间距需稳定。这些变量只用于布局留白，与文字大小解耦。
哪些地方必须用 padding，哪些只能用 margin
判断依据就一条：是否要让背景、边框、阴影跟着一起撑开。
立即学习“前端免费学习笔记（深入）”；
- 按钮文字离边缘太近 → 用
padding（否则背景色包不住文字） - 两个段落之间要空一行 → 用
margin-bottom（段落自身不该有内边距） - 模态框内容区和顶部标题之间留空 → 用
padding-top（整个模态框背景需连贯） - 导航栏菜单项横向间隔 → 用
margin-right（但最后一项加:not(:last-child)排除） - Grid/Flex 子项间距 → 优先用
gap，它不触发外边距合并，且自动跳过首尾
外边距合并（margin collapse）怎么快速识别和规避
这是最隐蔽的间距异常源头：相邻块级元素的垂直 margin 会取最大值，而不是相加。常见于 h2 + p、section > div:first-child 等结构。
- 现象：给
p设了margin-top: 20px，但实际只看到 10px 空隙 → 上方h2默认有margin-bottom: 16px，两者合并后取大值 20px，但浏览器渲染有舍入误差 - 临时排查：给父容器加
overflow: hidden或border: 1px solid transparent可阻止合并（原理是创建 BFC） - 长期方案：统一用
margin-bottom单向控制（所有元素只设下边距），或改用padding-bottom在父容器上留空
真正难的不是记规则，而是养成检查 computed styles 的习惯——右键审查元素，看「Margins」栏里显示的数值是不是你写的那个。很多所谓“间距不一致”，其实是开发者工具里一眼就能戳穿的外边距合并或继承值干扰。
