因为浏览器默认 box-sizing: content-box，width/height 仅指内容区，padding 和 border 额外叠加；如 width: 200px; padding: 15px; 实际宽为 230px，必须先全局设 box-sizing: border-box 才能避免意外撑开。
为什么 padding 一加盒子就变大？
因为浏览器默认用 box-sizing: content-box，此时 width 和 height 只算内容区，padding 和 border 全部额外加在外部。比如设了 width: 200px; padding: 15px;，实际占宽就是 200 + 15×2 = 230px——这不是“微调”，是“意外撑开”。
必须先统一设置 box-sizing: border-box
这是所有后续操作的前提。不改这个，其他技巧全是补丁。
- 全局生效最稳妥：
* { box-sizing: border-box; }或更严谨地加伪元素：*::before, *::after { box-sizing: border-box; } - IE8+ 支持
border-box，但若项目仍需兼容 IE7，就不能依赖它来反推尺寸，得手动计算或换布局方案 - 设成
border-box后，width: 200px; padding: 15px;意味着内容区自动缩为170px，总宽稳稳卡在200px
单独调整某一边内边距时，别误以为其他边会归零
padding-left: 24px 不会清空上下或右边的值，它只覆盖简写中对应位置的设定。已有 padding: 10px 12px（即上下 10px、左右 12px），再加 padding-left: 24px，结果是左=24px、右=12px、上=10px、下=10px。
- 想彻底重置某一边？显式写
padding-top: 0、padding-right: 0等，不能靠“不写=0” - 支持 RTL 的项目，优先用
padding-inline-start/padding-inline-end，但注意：Chrome 69+、Firefox 63+、Safari 15.4+ 才支持；IE 完全不认 -
padding所有单侧属性都不接受负值，padding-left: -5px直接被浏览器忽略（DevTools 里会 strikethrough）
没设宽高的元素，padding 不一定撑开盒子
如果元素没有显式设置 width 或 height，它的尺寸由内容和内边距共同决定，但表现因元素类型而异：
- 块级元素（如
div、p）：没设宽时，padding-left/right不会横向撑破父容器（宽度仍填满），但padding-top/bottom会让高度随内容自然增长 - 行内元素（如
span）：padding有效，但不会影响行高或换行逻辑；不过垂直方向的 padding 可能导致与邻近行内元素错位，视觉上“飘起来” - 浮动或绝对定位元素：padding 始终参与尺寸计算，且可能影响 float wrap 或定位偏移，务必结合
box-sizing: border-box使用
实际效果是否撑开，取决于盒模型、尺寸声明、元素显示类型三者叠加。最容易被忽略的是：box-sizing 必须在写任何 padding 前就确认生效，否则后面所有“精确控制”都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
