如何修复CSS卡片列表因padding不统一导致的错位？

错位根本原因是padding与box-sizing、gap、grid-template-columns叠加导致浏览器对“可用空间”计算错误；伪元素不继承box-sizing需显式声明；gap是刚性占位；含文字子项需min-width: 0和overflow: hidden。

为什么卡片加padding后整体错位

错位不是因为用了padding，而是它和box-sizing、gap、grid-template-columns叠加后，浏览器对“可用空间”的计算逻辑被打破。比如你设了grid-template-columns: 1fr 1fr，又给每个卡片加padding: 16px，但没设box-sizing: border-box，那每个卡片实际宽度就变成1fr + 32px，直接撑爆容器。

必须写全box-sizing重置规则

* { box-sizing: border-box }经常不管用，因为伪元素（如::before、::after）不继承该声明。很多 UI 库、清浮动代码、图标组件都依赖伪元素，只要它们还是content-box，就会多出几像素偏差。

1. 必须在所有 CSS 最顶部写：

   *,*::before,*::after { box-sizing: border-box; }

2. 第三方组件（如 React 的 Button）可能覆盖该规则，需在组件级单独加
3. 表单控件在旧版 Safari 中对 box-sizing 响应不稳定，可额外加 padding: 0.375em; border: 1px solid;

gap 和 padding 混用时的刚性冲突

gap 不是“视觉留白”，它是刚性占位——会从容器总宽里直接扣除。比如grid-template-columns: 1fr 1fr + gap: 12px，实际分配空间是容器宽度减去12px，再二等分。此时若子项还写了width: 100%，就会无视gap强占整列。

1. 别在 grid-item 上写 width: 100%
2. 含文字的子项务必加 min-width: 0 和 overflow: hidden，防长单词或 URL 撑开轨道
3. 父容器若有 padding 或 border，也得走 box-sizing: border-box，否则进一步压缩可用空间

调试时最易忽略的 baseline 干扰

哪怕所有卡片高度一致，含文字的项和纯图片项仍可能上下偏移几像素——这是字体基线（baseline）干扰。开发工具 Layout 面板里勾选 “Highlight grid tracks” 能看出轨道是否按预期渲染，但 baseline 偏移藏得更深。

1. 统一用 align-items: start 或 align-items: center，避免默认 stretch 拉伸不均
2. 文字类子项加 display: flex; align-items: center; 是兜底方案，但优先调容器级 align-items
3. 检查 line-height 是否一致，尤其混用不同字号时，line-height: 1.4 比 line-height: 20px 更安全

真实项目里，对齐偏差往往不是单一原因，而是box-sizing漏掉伪元素、gap被width覆盖、baseline未约束这三者同时松动的结果。