Bootstrap 5 的 .card 默认 padding 为 0,内容间距由 .card-body 的 padding: 1rem(16px)决定;调整卡片内边距应修改 .card-body,而非 .card 本身。
Card组件默认padding值是多少
bootstrap 5 的 .card 默认使用 padding: 1rem(即 16px),这个值来自 .card-body 类,而不是 .card 本身。很多开发者误以为改 .card 的 padding 就能调整内容间距,结果没生效——因为卡片主体内容实际包裹在 .card-body 里。
直接覆盖.card-body的padding最可靠
这是最快、最可控的方式,不依赖变体类或额外 wrapper:
- 在自定义 CSS 中写:
.card-body { padding: 0.5rem; }(缩小)或.card-body { padding: 2rem; }(放大) - 如果只改某一个卡片,加自定义 class:
<div class="card"><div class="card-body p-2">...</div></div>
,用 Bootstrap 内置间距工具类(p-0到p-5)快速替换 - 避免用
!important——只要你的 CSS 文件在 Bootstrap 之后加载,普通声明就能覆盖
用CSS自定义属性(Bootstrap 5.3+)动态调整
如果你项目已启用 Bootstrap 的 CSS 自定义属性支持(比如通过 Sass 编译或 CDN 引入了 bootstrap-css-only),可以直接复写 --bs-card-spacer-y 和 --bs-card-spacer-x:
.my-card {
--bs-card-spacer-y: 0.75rem;
--bs-card-spacer-x: 1rem;
}
注意:这个变量只影响 .card-body,且仅在 Bootstrap 5.3 及以上版本中生效;旧版本无效。
别碰.card本身的padding,除非你真要改边框内距
.card 元素自身只有 border 和 border-radius,它的 padding 是 0 —— 所以给 .card 加 padding 会把边框往里缩,同时撑大整个卡片容器,容易破坏栅格对齐或响应式布局。
- 常见错误:
.card { padding: 2rem; }→ 导致卡片宽度超预期,右侧内容被挤换行 - 真正需要“卡片整体留白”时,应该用外边距:
margin或 Bootstrap 的m-3等工具类 - 如果想统一所有卡片的 body 间距,建议全局覆盖
.card-body,而不是每个卡片单独加 class
最常被忽略的是:Card header/footer 也有自己的 padding(.card-header 默认 padding: 0.5rem 1rem),如果需要整体一致,得一并调整。


















