.card-group 无内边距，修改无效；应通过 gap 类或卡片自身 margin/padding 控制间距与内容留白，gap 更语义清晰且响应式友好。
别碰 .card-group 的内边距 —— 它压根没内边距，改了也没用。 Bootstrap 5.3+ 的 .card-group 是个 display: flex 容器，子卡片之间靠的是 margin（默认无间隙），不是 padding。所谓“修改内边距”，本质是控制卡片之间的空隙，或者卡片内容与边框的距离，这两者完全不在一个层级上。
为什么给 .card-group 加 px-3 没反应？
因为 .card-group 本身不渲染内容，它只是 flex 容器，padding 类作用在它身上，只会撑开容器四周的空白，但卡片依然紧贴排列——你想要的“卡片间距”根本没出现。常见错误现象：
- 写了
<div class="card-group px-4">，DevTools 里看到 padding 生效了，但卡片还是挨着 <li>想用 <code>py-5拉开上下距离，结果整个组往下移，卡片内部内容却没变 - 响应式类如
px-md-3在小屏下失效，误以为是断点问题，其实是逻辑用错了 - 给每个
.card加外边距：me-3（右外边距）或mb-4（下外边距），注意用me-*替代mr-*以支持 RTL - 给
.card加内边距：p-3或px-4 py-3，这影响的是卡片内容（标题、文本、图片）离边框的距离，不是卡片之间的空隙 - 如果卡片是垂直堆叠（比如
.card-group在小屏下），优先用mb-3；如果是水平并排（大屏），用me-3更自然
真正该操作的对象：卡片自身或卡片内部
要控制视觉上的“卡片间距”，有且只有两个可靠位置：
更干净的方案：用 gap 替代 margin
Bootstrap 5.3+ 原生支持 gap 工具类，直接作用于 .card-group 即可，无需动单个卡片：
立即学习“前端免费学习笔记（深入）”；
<div class="card-group gap-3 gap-lg-4"> <div class="card">...</div> <div class="card">...</div> </div>
好处是：
- 语义清晰：gap 就是“子项间距”，不干扰卡片自身的 margin/padding
- 响应式友好：
gap-lg-4只在 ≥992px 时生效，小屏自动回退到默认无间隙 - 避免 margin 折叠问题：不用再担心
mt-4在第一个卡片上被父容器吞掉 - IE 不兼容？那说明你还在维护老项目，此时退回
.card:not(:first-child) { margin-left: 1rem; }并确保.card-group是 flex
容易被忽略的细节：卡片背景图和顶部间距的冲突
如果你给 .card 设了背景图，又加了 mt-4，会发现图片也被往下推——这不是 bug，是 margin 折叠导致背景区域整体下移。这时候：
- 删掉
mt-4，改用父容器的pt-4（比如把.card-group包进一层<div class="pt-4">） <li>或者给 <code>.card-group加overflow: hidden触发 BFC，再保留mt-* - 千万别在
.card上同时写mt-4和pt-3，两者叠加会让顶部留白不可控
