卡片间距过大主因是默认样式叠加：p标签上下margin、flex/grid的gap设置过大、img基线对齐留白；应重置标题/描述/按钮margin、调小gap值、img设display:block或vertical-align:top。
卡片排版间距太大，八成是用了 gap 或 margin 却没控制好基数，或者根本没意识到默认样式在偷偷加空隙。
为什么卡片之间看起来“松垮”？
常见现象不是你多写了 margin，而是这些地方在叠加发功：
-
标签自带上下margin，嵌在卡片里就撑高了内部高度 - 卡片容器用了
flex-wrap: wrap+justify-content: space-between，但末尾行只剩 1–2 张卡时，左右 margin 被拉满 - 用了
grid-gap或gap却设成了24px这类“设计稿通用值”，实际小卡片根本吃不下 - 图片是
inline元素，默认基线对齐，底部留白 ≈ 4px，看着像下边距过大
快速收紧卡片内部间距（标题+描述+按钮）
别用 line-height 压缩——那会破坏文字可读性。直接重置默认流式间距：
- 给
.card-title加margin: 0 0 8px 0（而不是依赖h3默认 margin） - 给
.card-desc加margin: 0 0 12px 0，p的默认上下 margin 就被覆盖了 - 按钮统一用
display: block; width: 100%; margin-top: 8px;，避免贴着上文 - 整个卡片加
font-size: 14px（别留默认 16px），小字号天然压缩行间视觉密度
压缩卡片之间的网格/弹性间隙
如果你用的是 display: grid：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 把
gap: 24px改成gap: 12px，移动端建议直接gap: 8px - 禁用自动避边：加
grid-column-gap: 8px和grid-row-gap: 8px分开设，避免某些旧 Safari 把 gap 算进容器 padding - 别信
repeat(auto-fit, minmax(280px, 1fr))就万事大吉——280px 在窄屏上强制单列，但卡片内容少时显得太空，可试minmax(220px, 1fr)
如果你用的是 display: flex：
- 放弃
justify-content: space-between，改用justify-content: flex-start+gap: 8px（现代浏览器全支持） - 不支持
gap的老环境（如 Safari ≤15.6），用margin-right: 8px+margin-bottom: 8px，再给每行最后一张卡加margin-right: 0（用:nth-child(4n)或 JS 动态加 class） - 务必加
flex-wrap: wrap，否则gap不生效
图片底部那条“看不见的缝隙”怎么灭？
它不是 bug，是 inline 元素的基线对齐残留。三秒解决：
- 最稳：
img { display: block; }—— 四边 margin 完全可控 - 要保留 inline 行为（比如图文混排）：
img { vertical-align: top; } - 卡片内统一封装：
.card-img { line-height: 0; }，父容器清空行高干扰
真正容易被忽略的是：收紧间距不是单纯调小数字，而是先确认哪些空隙来自 HTML 解析（比如换行符生成的文本节点）、哪些来自默认样式、哪些来自布局模型本身的分配逻辑——三者混在一起时，只改 CSS 往往越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
