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。
- 用
padding替代margin推开子元素时，要注意它同时影响背景、边框的绘制范围 - 当父容器有背景色或边框，且需子元素“视觉上居中”时，
padding比margin更可靠（不会脱离文档流） - 避免混合使用：比如父设
padding: 20px，子又设margin: -20px—— 容易引发渲染差异和维护困难
百分比 padding 在垂直方向依赖父容器宽度而非高度
这是最容易踩坑的一点：padding-top: 20% 和 padding-bottom: 20% 的计算基准始终是父元素的 width，不是 height。即使父容器高度固定为 100vh，垂直方向 padding 仍按宽度算。
立即学习“前端免费学习笔记（深入）”；
- 想实现等比例内边距（如正方形卡片），只能靠
padding-bottom配合height: 0+position: absolute的 hack 方式 - Flex 或 Grid 布局中，优先用
gap控制间距，它不受此限制，语义也更清晰 - 媒体查询中若基于高度做响应，慎用百分比
padding，改用rem或vh单位更可控
padding 与 overflow、scrollbar 的交互常被忽略
当元素设置了 overflow: auto 且内容溢出时，padding 会保留在滚动区域内部 —— 滚动条出现后，内容依然离边框有距离，这是预期行为。但若 padding 过大，可能让可滚动区域变窄，甚至遮挡内容。
- Chrome 中自定义 scrollbar 的
::webkit-scrollbar不受padding影响，但会挤占内容宽度 - 移动端 Safari 对
padding+overflow-scrolling: touch的兼容性差，建议用overscroll-behavior控制回弹 - 调试时可用
outline: 1px solid red快速区分 padding 区域和 content 区域
