卡片边距应避免直接使用 margin，改用父容器 gap 控制或语义化状态类（如 .card--standalone）；阴影需多层组合实现浮起感，并响应式调整；所有样式切换须纯 CSS 实现。
卡片组件的类名设计要避开 margin 冲突
直接给 .card 加 margin 是最常见也最容易出问题的做法——当卡片嵌套在栅格容器（如 .grid-cols-3）或 Flex 容器中时，外边距会破坏布局流，尤其在响应式断点切换时容易出现错位或空白溢出。
推荐用「内边距 + 边框隔离」代替外边距控制间距：
- 所有卡片统一不设
margin，只设padding和border-radius - 用父容器控制卡片间距离：比如
gap-4（Tailwind）、grid-gap: 1rem（原生 CSS Grid）或display: flex; gap: 1rem - 若必须由卡片自身控制间距（如独立插入页面某处），改用
margin-inline或margin-block，避免影响文档流方向判断
阴影类要分层声明，不能只靠 shadow-md 一类通配
CSS 框架内置的阴影类（如 Tailwind 的 shadow-sm/shadow-lg）本质是单层 box-shadow 值，无法模拟真实卡片的「浮起感」——即浅色底+深色边缘+轻微模糊的复合效果。
需要手动组合时，优先用框架支持的自定义方式（如 Tailwind 的 shadow-[0_2px_8px_-1px_rgba(0,0,0,0.1),0_1px_0_rgba(0,0,0,0.05)]），或在 CSS 中扩展：
立即学习“前端免费学习笔记（深入）”；
.card-shadow-raised {
box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1),
0 1px 3px 0 rgba(0, 0, 0, 0.05),
0 2px 8px -1px rgba(0, 0, 0, 0.1);
}
注意：多层阴影叠加时，z-index 不影响阴影渲染，但若卡片有 transform: translateY(-2px) 类似微调，需确认父容器没设 overflow: hidden，否则阴影会被裁切。
边距控制必须绑定语义化上下文，而非全局类
像 mt-4、mb-6 这类工具类看似方便，但一旦卡片被复用到不同位置（如模态框内、侧边栏、列表项中），边距就会错乱。真正可控的方式是让边距成为卡片状态的一部分：
-
.card--standalone：独立展示，带margin-bottom: 1.5rem -
.card--inline：行内嵌入，仅设margin-inline: 0.5rem -
.card--compact：紧凑模式，禁用 padding，阴影降级为box-shadow: 0 0 0 1px rgba(0,0,0,0.05)
这类类名不依赖框架预设，可直接写进组件作用域 CSS 或通过 @apply 封装，避免在 HTML 层堆砌多个间距类。
响应式边距和阴影切换必须用媒体查询包裹，不可依赖 JS 动态加类
移动端卡片常需更小阴影、更大内边距（便于触控），但用 JS 监听 resize 并切换类名，既延迟又增加维护成本。正确做法是纯 CSS 响应：
@media (max-width: 768px) {
.card {
padding: 1rem;
}
.card-shadow-raised {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05),
0 1px 2px -1px rgba(0, 0, 0, 0.05);
}
}
如果框架不支持自定义断点（如某些旧版 Bootstrap），宁可复制一份 card-mobile 类，也不要让 JS 参与样式决策——毕竟阴影和边距属于呈现层，不是行为逻辑。
真正麻烦的是卡片内部内容对齐和文字截断在不同边距下的适配，那才是需要额外测试的点。
