padding 默认增大元素总尺寸，因在 width/height 外计算；启用 box-sizing: border-box 可使其从设定宽高中扣减，更符合直觉且利于响应式布局。
padding 会增大元素的总尺寸，除非启用 box-sizing: border-box
默认情况下，padding 是加在 width 和 height 之外的。比如设置 width: 200px; padding: 20px;，实际占用水平空间是 240px（200 + 左右各 20）。这常导致布局错位或容器溢出。
解决方法是统一加：
*, *::before, *::after { box-sizing: border-box; }
这样 padding 就会从设定的 width 内部“扣减”，200px 宽度包含内边距，更符合直觉。
- 不加
box-sizing: border-box时，响应式布局中容易因 padding 突然撑破父容器 -
box-sizing: content-box（默认）适合需要精确控制内容区尺寸的场景，比如 Canvas 或 SVG 容器 - 老项目升级时，全局改
box-sizing可能影响已有浮动/定位逻辑，建议先局部测试
padding 的四个方向值会影响子元素的相对定位基准
padding 不仅改变自身尺寸，还移动了内部子元素的“起始坐标”。例如一个 position: relative 的子元素，其 top: 0 是相对于父元素 content box 的上边缘；而父元素若有 padding-top: 30px，子元素就会被整体下推 30px。
