为什么 CSS 绝对定位元素加了 padding 后尺寸看起来“不对”？本质上，这并不是 padding 本身出了问题，而是由 content-box 盒模型、绝对定位的参考基准，以及宽度计算逻辑这三个因素共同造成的。在默认的 box-sizing 设置下，padding 会额外增加元素的整体宽度。同时，当父容器本身带有 padding 时，top 和 left 的偏移计算是基于父元素的 padding box。要解决这类 CSS 布局问题，可以配合使用 border-box，或者同时设置 left/right，也可以直接使用 inset:0。
绝对定位元素加 padding 后尺寸显示“不正确”，根本原因并不是 padding 写错了，而是它和默认盒模型、定位参照点、宽度推导规则叠加后，导致了视觉表现与实际计算结果不一致。
box-sizing 默认是 content-box，padding 会额外撑大元素尺寸
浏览器默认采用 box-sizing: content-box。这种情况下，如果你设置 width: 200px; padding: 12px;，那么元素最终总宽度其实是 200px + 24px（左右各 12px）。绝对定位元素依然遵循这个规则——它只是脱离普通文档流，并不会改变 CSS 盒模型的计算方式。
- 如果父容器宽度正好是 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才更容易控制；否则在带有padding的父容器中，width: 100%依然按内容区计算，容易造成误解 - 尽量避免这种组合：
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 是否成对设置完整。
