父容器padding导致子元素无法贴边是盒模型计算问题：width:100%按内容区计算，而padding缩窄可用空间；绝对定位子元素left:0对齐内容区而非边框，应改用inset:0并确保box-sizing:border-box。
父容器padding让子元素无法贴边，本质是盒模型计算问题
这不是bug，而是width: 100%默认按内容区计算，而padding属于父容器的内边距——它把可用空间“缩”了，但子元素仍试图占满整个父容器宽度（含padding），结果必然溢出或错位。
绝对定位子元素在带padding父容器中不贴边
当父容器设了position: relative和padding，子元素用position: absolute并写left: 0; top: 0时，它对齐的是父容器**内容区左上角**，不是整个盒子边缘。所以视觉上会离左/上边有padding距离。
- 修复方法：改用
inset: 0（等价于top: 0; right: 0; bottom: 0; left: 0），它会让子元素贴合父容器的**内边框边界**，自动避开padding - 兼容性注意：
inset在Chrome 89+、Firefox 63+、Safari 15.4+支持；老浏览器需回退为left: 0; top: 0; width: 100%; height: 100%，但要确保父容器box-sizing: border-box - 别用
margin: -20px硬拉——容易因不同padding值失效，且破坏可维护性
Flex子项设width: 100%后撑出父容器
Flex容器下，width: 100%和flex: 1混用，再叠加padding，极易触发双重尺寸叠加。比如父容器padding: 16px，子项width: 100% + padding: 12px，实际宽度 = 内容宽 + 24px，远超父容器可用宽度。
- 根本解法：给子项加
box-sizing: border-box，确保width包含padding和border - 必须配合
min-width: 0（尤其IE/旧Chrome），否则flex: 1会拒绝收缩 - 更干净做法：去掉
width: 100%，只用flex: 1，由Flex自动分配空间——此时padding不会导致溢出 - 检查DevTools「Computed」面板，确认
box-sizing最终生效，而非被第三方库样式覆盖
子元素margin被父容器padding“顶开”却误以为失效
给子元素设margin-top: 20px，父容器有padding-top: 20px，看起来间距是40px——但这不是“失效”，而是两者叠加。真正的问题常出现在想让子元素**紧贴父容器顶部**，却被padding挡住了。
- 若目标是视觉贴边：删掉子元素
margin-top，靠父容器padding-top控制整体留白 - 若必须保留子元素margin语义（如组件库封装）：用
padding-top: 0.1px替代padding-top: 20px打断外边距合并，再单独控制子元素margin - 警惕
overflow: hidden——它虽能隔离，但可能裁剪子元素的box-shadow、position: absolute下拉菜单等溢出内容
padding本身没有错，错在没同步调整子元素的尺寸基准或定位参考系。关键不是删padding，而是让子元素“知道”padding存在，并主动适配。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
