卡片标题与内容间距由.card-header和.card-body的padding共同决定，其中.card-header的padding-bottom是主要来源，.card-body的padding-top也参与贡献，二者叠加形成视觉间距。
卡片标题和内容之间默认的垂直间距由 .card-header 和 .card-body 的 padding 决定，不是靠 margin 拉开的——直接改 margin-top 容易破坏边框对齐或触发重绘错位。
卡片标题与内容间距由谁控制？
Bootstrap 5 的 .card-header 默认带 padding: 0.75rem 1.25rem，.card-body 带 padding: 1rem，两者之间的“视觉间距”其实是这两个 padding 的叠加效果。它们之间没有 margin，所以不能靠 mt-* 类去加空隙。
-
.card-header底部 padding 是间距的主要来源；减小它会压缩标题与内容的距离 -
.card-body顶部 padding 也参与贡献；但单独调它可能让内容文字上浮，脱离边框视觉基准 - 别碰
.card > .card-body的margin-top—— Bootstrap 没设这个值，硬加会导致在某些变体（如带 footer 的卡片）中边框断裂
安全调整间距的三种方式
优先级从高到低：用工具类覆盖 → 局部 class 覆盖 → 自定义 CSS（仅当需复用时）。
- 最简方案：给
.card-header加pb-2（减少底部 padding）或pb-4（加大），对应padding-bottom: 0.5rem或1.5rem - 若要同时收紧 header 和 body，可给
.card加pt-0并移除.card-header的pb-*，再给.card-body加pt-3，这样能精确控制“分界线到文字”的距离 - 避免写
.card-header { padding-bottom: 8px !important; }——!important会干扰响应式断点下的 padding 变化（比如pb-md-3就失效了）
为什么有时加了 pb-* 没反应？
常见于用了 d-flex 布局的 header，或者卡片被包在 .container / .row 里。
-
.card-header.d-flex下，pb-*仍生效，但 flex 子项高度可能撑开容器，让 padding 视觉上“被吃掉” - 父容器如
.row有g-3（即gap: 1rem），会额外增加卡片上下间距，误以为是卡片自身问题 - 用浏览器开发者工具选中
.card-header，看 computed 样式里的padding-bottom是否真被应用，而不是被其他规则覆盖
真正影响视觉节奏的是 padding 的组合效果，不是单点 margin；调得太小会让标题贴着内容，太大又割裂卡片结构——建议始终以 rem 为单位微调，避开像素级硬编码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
