如何修复CSS中固定宽度卡片加padding后的对齐问题？

根本原因是box-sizing: content-box与padding叠加导致尺寸失控；应全局重置为border-box，并确保伪元素、第三方组件及容器均生效，避免gap与padding叠加引发空间计算偏差。

固定宽度卡片加 padding 后错位，根本不是 padding 本身的问题，而是它和默认 box-sizing: content-box 碰在一起，让实际尺寸失控了。

为什么 width + padding 会撑破容器

浏览器默认按 content-box 计算：你写 width: 300px; padding: 16px;，元素总宽就是 332px（内容区 300px + 左右各 16px）。两列并排时，哪怕都设了 width: 50%，只要一加 padding，立刻超宽换行或横向滚动。

1. 所有现代 UI 库（如 Ant Design、MUI）内部组件若没显式设 box-sizing: border-box，也会复现该问题
2. 伪元素（::before/::after）不继承全局 box-sizing，必须单独声明
3. 表单控件（input、select）在旧版 Safari 中对 box-sizing 响应不稳定，建议额外加 padding: 0.375em; border: 1px solid; 做兜底

必须写的三行重置代码

把这三行放在整个 CSS 文件最顶部，不能被任何其他规则覆盖：

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

1. 只写 * 不够——::before 和 ::after 是独立节点，不继承父级 box-sizing
2. 第三方组件（比如 React 的 Button）可能内联样式覆盖该规则，需在组件级补一句 .my-button { box-sizing: border-box; }
3. 如果项目用 PostCSS 或 Tailwind，确认它们的重置逻辑是否已包含伪元素；Tailwind 默认已覆盖，但自定义插件可能漏掉

卡片布局中 padding 和 gap 混用的坑

Grid 或 Flex 卡片列表里，padding 写在卡片上，gap 写在容器上，二者叠加容易引发“可用空间”计算偏差：

1. gap 是刚性扣除：设 grid-template-columns: 1fr 1fr; gap: 16px;，浏览器先从容器宽减去 16px，再二等分——此时若卡片又设 width: 100%，就会强占整列，无视 gap
2. 含文字的卡片子项（如标题、描述）必须加 min-width: 0 和 overflow: hidden，否则长 URL 或连续英文单词会撑裂网格轨道
3. 容器自身若有 padding（比如 .card-grid { padding: 24px; }），也得走 box-sizing: border-box，否则进一步压缩可用空间

真正难处理的不是 padding 本身，而是它和 box-sizing、gap、grid-template-columns 三者同时存在时，浏览器对“剩余空间”的四舍五入和亚像素分配——尤其在缩放 110%、125% 场景下，几像素误差会逐层放大。所以重置必须彻底，且要检查伪元素和第三方组件是否漏网。