父子元素间距应由父容器用padding控制内边距、子元素用margin控制兄弟间距；padding确保背景/边框包裹内容且不塌陷，margin-bottom统一定义垂直间隔可避免塌陷，响应式中宜用rem或clamp()协调比例。
父子元素间距的合理性，关键在于明确“谁负责留白”——通常由父容器用 padding 控制内部内容与边界的距离，子元素用 margin 控制彼此之间的距离。混淆使用会导致重叠、塌陷或难以维护。
父容器用 padding 划定“内边距安全区”
父元素的 padding 是最稳妥的内部留白方式，它不会影响文档流布局，也不会触发 margin 塌陷，还能让背景色/边框自然包裹内容。
- 适合场景：卡片、模态框、表单容器、文章正文区域等需要统一内边距的块级包装器
- 建议值：常用 16px、20px、24px（兼顾可读性与移动端触控）
- 注意：若父元素有背景或圆角，padding 能确保内容不贴边，视觉更舒适
子元素用 margin 控制“兄弟间距”
相邻子元素之间用 margin（尤其是 margin-bottom）来定义垂直间隔，逻辑清晰、易于调整，且符合语义直觉（“这个元素下面空多少”）。
- 推荐统一用 margin-bottom（而非上下都设），避免嵌套时意外叠加
- 慎用 margin-top：在首子元素上设 margin-top 可能导致父容器 margin 塌陷，尤其父元素无 border/padding 时
- 示例：标题 + 段落 + 列表，给 h2、p、ul 各自设 margin-bottom，比在 p 上设 margin-top 更可控
避免 margin 塌陷的实用策略
父子间垂直 margin 相邻时易塌陷（取较大值），这不是 bug，而是 CSS 规范行为。可通过以下方式规避：
立即学习“前端免费学习笔记（深入）”；
- 父元素设置 border: 1px solid transparent 或 padding: 0.01px（不干扰视觉）
- 父元素触发 BFC：如 overflow: hidden、display: flow-root（现代推荐）
- 子元素改用 padding 替代 margin（仅限内部微调，不推荐作为主要间距手段）
响应式中保持间距比例协调
不同屏幕下，固定像素间距可能显得过紧或松散。建议：
- 小屏（手机）：用较小基础值，如 padding: 12px；子元素 margin-bottom: 16px
- 大屏（桌面）：配合 rem 或 clamp() 提升可读性，如 padding: clamp(1rem, 4vw, 1.5rem)
- 统一单位：全项目优先使用 rem 或 em，便于全局缩放调整
