根本原因是未区分“元素自身留白”（padding）和“元素之间距离”（margin），导致双倍间距、外边距合并、视觉节奏断裂等问题；应统一用4px整数倍的CSS自定义属性控制，并严格按语义选用padding或margin。
为什么用 margin 和 padding 调间距总显得乱？
根本原因是没区分「元素自身留白」和「元素之间距离」。比如给按钮加 margin-bottom: 16px，本意是让它和下个模块保持间距，但如果那个模块也自己加了 margin-top: 16px，实际就变成 32px——这就是典型的“双倍间距”问题。
更常见的是：不同组件各自定义 padding，但没对齐基准值；或者用 margin 做布局，结果父子元素发生外边距合并（margin collapse），导致预期失效。
- 文字块用
padding: 12px，卡片用padding: 16px，视觉节奏就断了 - 列表项用
margin-bottom，但最后一项多出多余空白 - 在 flex 容器里还用
margin对齐，其实该用gap
怎么用一套数字管住所有间距？
定一个基础单位（比如 4px），所有 margin 和 padding 只允许取它的整数倍：4px、8px、12px、16px、24px、32px。别用 5px、10px 或 18px 这类“手感值”。
推荐直接写成 CSS 自定义属性，方便全局控制：
立即学习“前端免费学习笔记（深入）”；
: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);
}
.section {
margin-bottom: var(--space-xl);
}
哪些地方必须用 padding，哪些只能用 margin？
padding 是元素“内部呼吸感”，影响背景色、边框范围；margin 是它“对外的距离”，不参与背景渲染。选错就会破坏视觉层级或交互热区。
- 按钮文字离边缘——用
padding（否则点击区域变小） - 两个独立区块之间的空隙——用
margin（且只在后一个加margin-top，避免合并） - 卡片内文字和边框之间——用
padding（不是margin，否则边框会包不住内容） - 表单控件垂直堆叠——优先用
flex+gap，而不是每个控件加margin-bottom
遇到外边距合并（margin collapse）怎么破？
父元素和第一个/最后一个子元素的垂直 margin 会“叠”在一起，比如父容器 margin-bottom: 20px，子元素 margin-top: 20px，实际只显示 20px，不是 40px。这常让新手以为“样式没生效”。
解决方法不是硬调数值，而是切断合并条件：
- 给父元素加
border-top或padding-top（哪怕只有1px） - 给父元素设
overflow: hidden（副作用小，最常用） - 改用
padding替代子元素的margin-top - 用
display: flow-root（现代写法，兼容性 OK）
真正麻烦的是嵌套多层后的隐式合并——这时候回头检查是否真需要那么多 margin，往往删掉一半反而更稳。
间距不一致的根子不在数值本身，而在没有约束的自由发挥。定好单位、分清内外、切断合并，比反复调像素靠谱得多。
