绝对定位元素加padding后尺寸“不对”是因content-box盒模型、定位基准偏移和宽度推导逻辑共同导致；默认box-sizing下padding额外增加总宽，父容器有padding时top/left基于其padding box计算，需配合border-box、成对设置left/right或使用inset:0解决。
绝对定位元素加 padding 后尺寸“不对”，根本不是 padding 本身出错，而是它和默认盒模型、定位基准、宽度推导逻辑三者叠加导致的视觉与行为错位。
box-sizing 默认是 content-box，padding 会额外撑开
浏览器默认用 box-sizing: content-box，此时你写 width: 200px; padding: 12px;，元素总宽其实是 200px + 24px（左右各 12px）。绝对定位不改变这一规则——它只脱离文档流，不改盒模型计算。
- 若父容器宽度刚好 200px，子元素就会横向溢出，哪怕它看起来“贴着边”
- 调试时看 DevTools 的 “Layout” 面板，对比 “Width” 和 “Layout Width”，差值就是 padding + border
- 全局修复：在根级或组件作用域加
* { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; }
left/right/width 没配齐，padding 让“坍缩”更明显
只设 position: absolute; left: 20px;，没设 right 或 width，浏览器无法推导宽度，会退回到“内容最小宽度”。这时加 padding，反而让空元素或单行文字显得更窄、甚至不可见。
- 想横向拉伸：用
left: 20px; right: 20px;，宽度 = 父内容宽 − 40px，padding会从这个结果里扣减（前提是box-sizing: border-box） - 想固定宽度：显式写
width: 160px;，再加padding才可控；否则width: 100%在带padding的父容器里仍按内容区算，容易误判 - 避免混用：
width: 100%; padding: 12px;+box-sizing: content-box= 必然溢出
padding 改变了定位参考点，但你没意识到
绝对定位元素的 top/left 是相对于最近已定位祖先的 padding box 左上角。如果父容器有 padding: 20px;，那 top: 0; left: 0; 实际是贴在离父边框 20px 的位置——你加的 padding 又进一步把内容往里推，双重偏移就显得“尺寸错乱”。
- 验证方法：给父容器临时加
outline: 1px solid red;，看子元素是否对齐 outline 内边缘 - 更干净的替代：用
inset: 0;（等价于top: 0; right: 0; bottom: 0; left: 0;），它自动对齐父容器的内边框边界，避开 padding 干扰 - 兼容性兜底：老浏览器用
top: 0; left: 0; width: 100%; height: 100%;，但必须确保父容器也用了box-sizing: border-box
真正容易被忽略的是：你调的不是 padding，而是在和盒模型、包含块、宽度推导三者博弈。改一行 padding 前，先确认 box-sizing 是否生效、父容器是否有可计算的宽高、以及 left/right 是否成对存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
