padding导致盒子变大是正常行为，因默认box-sizing为content-box，width/height仅指内容区，padding和border额外增加；改用border-box后width/height包含padding和border，内容区自动缩小。
padding 导致盒子变大是正常行为
默认情况下，box-sizing 是 content-box，这意味着你设置的 width 和 height 只控制内容区大小，padding 和 border 会额外加在它外面——所以盒子整体尺寸 = width + padding×2 + border×2。这不是 bug，是 css 规范定义的行为。
用 box-sizing: border-box 让 padding 不撑大盒子
把 box-sizing 改成 border-box 后，width 和 height 就表示「整个盒子的最终尺寸」，padding 和 border 会被压缩进这个范围内，内容区自动缩小。
- 必须显式声明，不能依赖浏览器默认
- 推荐全局重置：
*, *::before, *::after { box-sizing: border-box; } - 注意：
box-sizing不继承，每个元素都要生效才起作用 - IE8+ 支持，无需前缀；但老 android（≤4.3）需加
-webkit-box-sizing
为什么有时加了 border-box 还变大？
常见原因不是 box-sizing 失效，而是其他样式干扰：
-
margin没被算进尺寸，但它会让元素占据更多空间（外边距塌陷或叠加） - 父容器有
min-width或flex/grid约束，导致子元素无法按预期收缩 - 字体、行高、内联元素的
vertical-align引起基线对齐，视觉上像“撑高” - 设置了
display: inline-block且存在空白字符，产生看不见的间隙
调试时该看哪几个值？
打开浏览器开发者工具，选中元素后重点看「Computed」面板里的这几项：
立即学习“前端免费学习笔记（深入）”；
-
box-sizing是否为border-box -
width/height—— 实际生效的设定值 -
padding-left/padding-right等 —— 是否如预期被包含进去 -
border-width—— 它也参与border-box的尺寸计算 - 最底下「Layout」或「Box Model」图示 —— 直观确认各层尺寸是否重叠或溢出
如果 padding 明明设了 10px，但内容区宽度少了 20px，说明 border-box 已生效；如果少了 0px，那大概率是 box-sizing 没生效或被更高优先级规则覆盖。