问题的根源在于 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%，只要继续增加内边距，就很容易出现超出容器、自动换行，甚至页面横向滚动的问题。这也是很多人搜索“CSS 固定宽度卡片加 padding 后错位”时最常遇到的原因。
- 很多现代 UI 组件库，如 Ant Design、MUI，如果内部组件没有显式声明
box-sizing: border-box，同样会出现卡片宽度被撑开的情况 - 伪元素（
::before/::after）不会自动继承全局box-sizing，因此必须单独补上声明 - 表单控件（
input、select）在旧版 Safari 中对box-sizing的兼容表现不够稳定，建议额外增加padding: 0.375em; border: 1px solid;作为兜底方案
必须写的三行重置代码
建议把下面这三行 CSS 重置代码放在整个样式文件最顶部，并避免被后续规则覆盖，这是修复固定宽度卡片加 padding 后布局错乱的关键步骤：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 只写
*还不够，因为::before和::after属于独立生成的盒子，不会继承父元素的box-sizing - 第三方组件（例如 React 中的
Button）可能通过内联样式覆盖全局规则，这时需要在组件层单独补充.my-button { box-sizing: border-box; } - 如果项目使用 PostCSS 或 Tailwind，也要确认它们的 reset 是否已经覆盖伪元素；Tailwind 默认通常已处理，但自定义插件或局部样式可能存在遗漏
卡片布局中 padding 和 gap 混用的坑
在 Grid 或 Flex 卡片列表布局中，如果 padding 写在卡片本身，而 gap 写在父容器上，两者叠加后很容易造成空间分配不准确，进而出现卡片错位、换行异常或宽度溢出的问题：
gap属于固定扣除空间：例如设置grid-template-columns: 1fr 1fr; gap: 16px;时，浏览器会先从容器总宽度中减去 16px，再将剩余空间平分；如果此时卡片又写了width: 100%，就可能直接占满整列，导致与gap的预期表现不一致- 包含文字内容的卡片子项，如标题、简介、描述区域，建议补充
min-width: 0和overflow: hidden，否则超长 URL 或连续英文单词会把网格轨道强行撑开 - 如果外层容器本身也设置了
padding（例如.card-grid { padding: 24px; }），同样必须配合box-sizing: border-box使用，否则可用宽度会被进一步压缩，导致布局更容易失衡
真正复杂的地方并不只是 padding，而是在它与 box-sizing、gap、grid-template-columns 同时存在时，浏览器会对“剩余空间”进行四舍五入和亚像素分配。尤其在页面缩放到 110% 或 125% 时，原本只有几像素的误差也可能被层层放大，最终表现为卡片不对齐、边缘错位或局部溢出。因此，要彻底修复 CSS 中固定宽度卡片加 padding 后的对齐问题，最有效的方法就是完整重置盒模型，并逐一排查伪元素、第三方组件和容器样式是否全部统一为 border-box。
