元素间距不一致的根源是浏览器默认margin/padding差异或手动设置不统一，解决需“主动归零+统一设置”：重置默认值（通配符或normalize.css）、用语义化工具类管理间距、规避margin合并、响应式分层设计。
元素间距不一致，通常是因为不同标签默认的 margin 或 padding 值不同，或开发者手动设置了不统一的值。解决核心是“主动归零 + 统一设置”，而不是依赖浏览器默认行为。
重置默认外边距，从源头控制
浏览器对 h1~h6、p、ul、ol、form 等元素自带上下 margin，这是间距混乱的常见原因。
- 在 CSS 开头用通配符或基础重置清掉默认值：
* { margin: 0; padding: 0; }（简单粗暴，适合小项目） - 更推荐使用 normalize.css，它保留有用的默认样式，只修正不一致部分
- 若只处理特定元素，可单独重置：
h2, p, ul { margin-top: 0; margin-bottom: 1rem; }
用 class 统一控制组件间距
避免在每个元素上写 margin-bottom: 20px 这类重复代码，改用语义化 class 管理。
- 定义通用间距工具类：
.mb-s { margin-bottom: 0.5rem; }
.mb-m { margin-bottom: 1rem; }
.mb-l { margin-bottom: 1.5rem; } - HTML 中直接复用：
标题
正文段落
- 这样既保证视觉节奏一致，也方便后期全局调整（改一个 class 就全变）
注意 margin 合并（Margin Collapse）现象
相邻块级元素的垂直 margin 会自动合并为较大的那个值，导致实际间距 ≠ 预期值。
立即学习“前端免费学习笔记（深入）”；
- 典型场景：两个
元素分别设了margin-bottom: 20px和margin-top: 12px，实际间距是 20px，不是 32px - 规避方法：
– 只设单侧 margin（如统一用margin-bottom，顶部不留空）
– 用padding替代部分 margin（父容器加 padding 更可控）
– 触发 BFC（如给父元素加overflow: hidden），阻止合并（慎用，影响布局）
响应式间距需分层设计
PC 和移动端对“合适间距”的感知不同，不能一套值打天下。
- 用媒体查询按断点调整：
.mb-m { margin-bottom: 1rem; }
@media (max-width: 768px) { .mb-m { margin-bottom: 0.75rem; } } - 或使用 CSS 自定义属性 + clamp() 实现流体间距：
:root { --space-base: clamp(0.5rem, 2vw, 1rem); }
.mb-auto { margin-bottom: var(--space-base); }
