卡片间距不一致的根本原因是margin塌陷、inline元素空白、布局模型冲突及gap与margin职责混淆；应优先用gap控制同级间距，慎用负margin仅作微调。
卡片排版间距不一致，根本原因往往不是 margin 没设对，而是 margin 塌陷、inline 元素默认行为、父容器布局模型冲突，或没意识到 gap 和 margin 的职责边界。负值 margin 是“补救手段”，不是设计起点。
为什么卡片间上下/左右间距忽大忽小？
常见错误现象包括：相邻卡片垂直方向空隙比预期多 8px；最后一行卡片右侧多出空白；响应式断点后卡片挤在一起或错位；p 标签自带上下 margin 导致卡片内部高度跳变。
- 父子元素间
margin-top/margin-bottom容易塌陷——比如卡片容器设了margin-top: 20px，第一个子卡片又设了margin-top: 16px，实际只生效较大的那个值 -
inline-block卡片因换行符生成空格文本节点，造成固定 4px 水平间隙，哪怕写了margin: 0也无效 - 用
float或未设flex-wrap: wrap的flex容器时，末尾项的margin-right无对应清除逻辑，视觉上多出一格空隙 - 卡片内文字行数不同，但没统一控制底部留白，导致图标或按钮基线参差不齐
什么时候该用 gap 而不是 margin？
gap 是现代布局中控制卡片间距的首选，它专为“同级子元素之间”而生，不参与 margin 塌陷，不污染首尾外边距，也不受 inline 空白符干扰。
- Flex 容器：必须同时设
display: flex+flex-wrap: wrap，再加gap: 16px—— 这比给每个卡片写margin-right: 16px; margin-bottom: 16px;干净得多 - Grid 容器：
gap: 24px（等价于row-gap: 24px; column-gap: 24px;）作用于网格轨道之间，与子项自身 margin 完全解耦 - IE 不支持
gap？降级方案不是硬套负 margin，而是用:not(:last-child)控制右侧/下侧 margin：.card:not(:last-child) { margin-right: 16px; } - 注意：
justify-content: space-between在卡片数量不固定时容易露馅（比如只剩一张卡就贴左），不如gap可控
负 margin 真正该用在哪几个地方？
负 margin 不是调间距的常规工具，它是用来“微调对齐”或“抵消意外空白”的手术刀，滥用会导致维护困难和响应式失效。
- 修复
inline-block间隙：在父容器设font-size: 0，子卡片内再重置font-size；或更稳妥地直接切到flex/grid，避免负 margin 补救 - 让标题图标紧贴文字：若
h3后紧跟svg，且希望图标垂直居中对齐文字中线，可对svg设margin-top: -2px微调，而非改整个卡片结构 - 卡片悬停时阴影外扩，但不想撑开布局：给
.card:hover加margin: -4px抵消box-shadow的视觉膨胀 - 绝对定位卡片内的“关闭按钮”需要精确贴右上角：用
top: 8px; right: 8px;，而不是靠负 margin 把它从文档流里拽出来
卡片底部图标对不齐？别碰 position
图标位置参差，本质是卡片内容高度不一致引发的基线漂移。强行用 position: absolute; bottom: 0 会因父卡片高度不定而失效，且破坏语义和可访问性。
- 最简方案：所有卡片统一设
margin-bottom: 20px，靠一致外边距形成视觉对齐线 - 进阶方案：卡片设
display: flex; flex-direction: column; justify-content: space-between;，图标容器加margin-top: auto，自动撑到底部 - 避坑点：不要在 flex 容器上同时设
align-items: flex-end，这会让文字右对齐，破坏阅读流 - 如果用了
grid，直接用align-self: end控制图标在单元格内底部对齐，更稳定
真正难的不是写出能跑的样式，而是判断哪一层该由 layout（flex/grid）接管，哪一层该由 spacing（gap/margin）表达，哪一层该由 alignment（align-self/justify-content）收口——三者混用或错位，才是间距失控的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
