根本原因是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，立刻超宽换行或横向滚动。
- 所有现代 UI 库（如 Ant Design、MUI）内部组件若没显式设
box-sizing: border-box，也会复现该问题 - 伪元素（
::before/::after）不继承全局box-sizing，必须单独声明 - 表单控件（
input、select）在旧版 Safari 中对box-sizing响应不稳定，建议额外加padding: 0.375em; border: 1px solid;做兜底
必须写的三行重置代码
把这三行放在整个 CSS 文件最顶部，不能被任何其他规则覆盖：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 只写
*不够——::before和::after是独立节点，不继承父级box-sizing - 第三方组件（比如 React 的
Button）可能内联样式覆盖该规则，需在组件级补一句.my-button { box-sizing: border-box; } - 如果项目用 PostCSS 或 Tailwind，确认它们的重置逻辑是否已包含伪元素；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% 场景下，几像素误差会逐层放大。所以重置必须彻底，且要检查伪元素和第三方组件是否漏网。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
