根本原因是box-sizing默认为content-box，导致padding不包含在100vh内，使总高度超视口而出现滚动条；应改用border-box并配合background-origin: padding-box等设置。
全屏背景加padding后页面出现滚动条
根本原因是 box-sizing 默认值为 content-box，此时元素的 width 和 height 不包含 padding，而全屏背景常依赖 100vh 或 100vw 布局——一旦加上 padding，总高度就超过视口，触发垂直滚动条。
- 典型场景：用
body或html设background-image+padding: 2rem，结果底部多出滚动条 - 错误写法：
height: 100vh; padding: 2rem;→ 实际占用高度 =100vh + 4rem - 正确做法：改用
box-sizing: border-box，让padding被包含在100vh内部计算
body/html 元素上直接设 padding 的兼容性陷阱
body 默认有浏览器内置 margin（通常 8px），且部分老版本 Safari 对 body 的 height: 100vh 支持不稳定；html 更稳妥，但它的 padding 会撑开整个文档流，影响子元素定位基准。
- 推荐锚点：优先对
html设height: 100%，再对body设min-height: 100vh+box-sizing: border-box - 避免踩坑：不要给
html直接加padding，它会导致position: fixed元素（如导航栏）偏移 - 移动端注意：iOS Safari 中
100vh会随地址栏隐藏/显示动态变化，用100dvh更可靠（需检查支持度）
padding 导致背景图被裁切或错位
背景图默认从元素内容区左上角开始绘制，padding 会让内容区缩小，但背景图起点不变，视觉上就像“被内缩了”。尤其当使用 background-size: cover 时，裁剪区域会意外偏移。
- 解决方向：用
background-origin控制起点，设为padding-box可让背景图从 padding 区边缘开始铺排 - 常用组合：
background-origin: padding-box; background-clip: content-box;—— 前者定起点，后者控制绘制范围（避免背景色溢出 padding） - 别漏掉
background-repeat: no-repeat，否则padding-box下重复图会从 padding 边缘开始，造成奇怪间隙
用 calc() 手动减去 padding 的风险
有人写 height: calc(100vh - 4rem) 来抵消 padding: 2rem，看似合理，实则脆弱：一旦 padding 值变、媒体查询介入、或需要响应式断点，calc 表达式就得同步改，维护成本高，还容易漏掉左右 padding 对宽度的影响。
立即学习“前端免费学习笔记（深入）”；
- calc 不适配动态值：比如
padding: clamp(1rem, 4vw, 2rem)就没法用静态 calc 抵消 - 更稳方案：坚持
box-sizing: border-box+height: 100vh，一劳永逸 - 若必须用 calc（如兼容 IE11），至少把 padding 提取为 CSS 自定义属性：
--pad: 2rem;，然后写height: calc(100vh - 2 * var(--pad))
真正麻烦的不是 padding 本身，而是它和 viewport 单位、box-sizing、background-origin 这三者的联动关系——改其中一个，另外两个往往得跟着调，否则滚动条或背景错位就悄悄回来了。
