直接设 padding 可实现内边距，但自适应需 box-sizing: border-box 统一盒模型基准，避免 calc() 硬减；响应式 padding 须靠媒体查询或 clamp() 控制，不可依赖 flex 或 % 单位；gap 与 padding 各司其职，配合 min-height 与内容约束保障视觉完整性。
直接给卡片设 padding 就能实现内边距，但“自适应”指的是它要随卡片宽度缩放、不破坏布局节奏——关键不是加 padding，而是控制 padding 如何参与 flex 计算。
flex-basis 里别硬减 padding，用 box-sizing: border-box 统一基准
很多人写 flex-basis: calc(25% - 20px) 去抵消左右 padding，结果卡片错位。因为 padding 不影响 flex-basis 的计算逻辑，它只是内容区内部的留白；而 flex-basis 是指“主轴方向上的初始尺寸”，默认不含 padding。
正确做法是让 padding 成为盒模型的一部分，避免额外心算：
- 给卡片统一加
box-sizing: border-box，这样width或flex-basis就包含padding和border - 再设
padding: 1rem，它会自动从flex-basis分配的空间里扣减，无需手动在calc()里减像素值 - 如果必须用百分比基础（如四列），直接写
flex: 0 0 calc((100% - 48px) / 4)→ 这里的48px是三处gap总和（gap: 16px），不是 padding
响应式 padding 要靠媒体查询，不能靠 flex 自动缩放
padding 本身不响应容器宽度变化，flex 不会把它当弹性因子处理。想让小屏 padding 更紧凑、大屏更宽松，必须显式控制：
立即学习“前端免费学习笔记（深入）”；
- 用
rem或em单位，配合根字体大小动态调整（例如:root { font-size: clamp(14px, 2.5vw, 16px); }） - 或分断点写死：
@media (max-width: 768px) { .card { padding: 0.75rem; } } - 避免用
%设padding（比如padding: 2%），它基于父容器宽度，横向 padding 会随屏幕拉伸，常导致文字被挤扁
gap 比 margin 更安全，但和 padding 共存时要注意层级
卡片之间用 gap 管理间距，卡片内部用 padding 管理内容呼吸感，两者不冲突——但容易踩的坑是：如果卡片用了 margin 又启用了 gap，margin 会被 gap 忽略（Flex 容器中子项的 margin 不参与 gap 计算）。
- 推荐组合：
gap: 16px控制卡片间距 +padding: 1.25rem控制卡片内边距 - 若需首尾不留空隙（比如容器有背景色），
gap天然支持，不用像margin那样写:not(:first-child) - IE11 不支持
gap，得降级用margin+nth-child微调，此时务必确认box-sizing: border-box已生效，否则 margin 会撑出容器
卡片内文字/图片溢出时，padding 会失效？
不是 padding 失效，而是内容撑破了卡片高度，导致 padding 在视觉上被覆盖。常见于未约束的图片或长单词：
- 图片加
max-width: 100%; height: auto;，防止拉伸破坏 padding 区域 - 文本加
word-break: break-word;，避免单个超长链接或邮箱顶穿底部 padding - 慎用
line-clamp：它依赖-webkit-box，与flex子项的渲染顺序可能打架，有时会让 padding 下移或折叠 - 如果卡片有固定高度需求（如封面图统一高），改用
min-height+padding，而非height
真正难的不是加 padding，而是让它不成为布局漂移的源头——所有 padding 都该在 box-sizing: border-box 下定义，所有响应式变化都该由断点或根字号驱动，而不是指望 flex 自己“感知”内边距缩放。
