box-sizing: border-box使width/height表示总占位尺寸，即设定值等于内容区+padding+border之和，内容区自动收缩；而content-box下width仅指内容区，padding和border额外叠加导致实际尺寸膨胀。
padding 和 border 在 content-box 下会额外增加元素总宽高
浏览器默认使用 content-box 盒模型，width 和 height 仅控制内容区尺寸。一旦给图片（或任何块级/内联替换元素）加 padding 或 border，它们就会叠加在声明的宽高之外，导致实际占位变大——比如 width: 200px; padding: 10px; border: 2px solid #000; 的图片，真实宽度是 224px，必然撑破父容器或挤开兄弟元素。
常见错误现象：
- 图片右侧突然出现水平滚动条
- 并排的
<img>在 flex 容器中换行错乱 - 响应式网格里某张图“掉下来”，其他正常
解决方法很简单：强制切换盒模型
- 全局统一加：
* { box-sizing: border-box; }（推荐连同*::before, *::after一起） - 只针对图片加：
img { box-sizing: border-box; } - 如果项目已用第三方 UI 库，优先查其文档是否已处理，避免冲突
img 是内联替换元素，上下 padding 不影响行高但会视觉错位
<img> 默认是 display: inline，它的上下 padding 虽然渲染出来，但不会改变所在行框（line box）的高度，也不会推动相邻行。结果就是：图片看起来“浮”在文字上方，或底部留白异常，尤其在段落中混排时特别明显。
使用场景与建议：
- 需要图文对齐？改用
display: inline-block或vertical-align: middle - 想靠 padding 做点击热区？优先包裹一层
<span></span>或用padding+line-height控制整体高度 - 绝对定位的图片？
padding仍生效，但基准点是 content-box 左上角，若没设box-sizing: border-box，top/left计算会偏移
background-image + padding 组合时，background-origin 默认值是罪魁祸首
如果你不是直接给 <img> 标签加 padding，而是用 div + background-image 模拟图片，并设了 padding，那偏移大概率来自 background-origin 的默认行为：它默认是 padding-box，也就是说 background-position: 0 0 对齐的是 padding 区域左上角，不是内容区——于是图看起来“右下偏了 20px”。
关键修复点：
- 加
background-origin: content-box，让背景图真正贴着文字/内容边缘 - 必须同步确认
box-sizing：如果父容器是content-box且有padding，width计算和背景坐标系就不同步，依然错位 - 别用
border-box作background-origin基准，border 宽度不可控，容易引入新偏差
移动端和 flex/grid 中 padding 表现更隐蔽
在 flex 容器里，子项的 padding 会影响 flex-basis 的计算起点；在 grid 里，它不参与轨道分配，但会压缩单元格内内容可用空间。更麻烦的是移动端：iOS 键盘弹出时视口高度重算，如果图片父容器用了 height: 100vh + padding，而没 fallback，内容会被截断，看起来像“整体偏移”。
调试时盯住这几个点：
- Chrome DevTools “Computed” 面板里看
box-sizing是否为border-box，以及width值是否符合预期 - 勾选 “Show padding area”，直观确认 padding 是否挤压内容或重叠
- 用
getBoundingClientRect()在控制台测真实尺寸，比肉眼判断可靠
最常被忽略的是：你改了 background-origin，却忘了 box-sizing 还卡在默认值上——两个属性必须配对生效，单独调一个等于没调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
