body 顶部空白是移动端浏览器（如 Safari、Chrome for iOS）默认为 body 设置 margin 及 viewport 缩放、font-size 继承等共同导致；需显式重置 html/body 的 margin/padding/height，并配置 viewport 禁用缩放。
为什么 body 顶部总有看不见的空白？
这不是 bug，是移动端浏览器（尤其是 Safari 和 Chrome for iOS）默认给 body 添加了 margin，同时可能叠加了 viewport 缩放、font-size 继承或 user-scalable=yes 导致的渲染偏移。最常见现象是：页面一打开，内容就往下“掉”一截，滚动条初始位置不在顶边。
用 reset + viewport 双保险强制归零
单靠 * { margin: 0; padding: 0; } 不够——它不覆盖浏览器 UA 样式中对 body 的特殊处理。必须显式重置关键元素，并约束视口行为：
-
body和html都要设margin: 0; padding: 0; - 加
height: 100%;到html，避免高度塌陷干扰定位 -
viewportmeta 中禁用缩放（user-scalable=no），并设initial-scale=1，否则 iOS 会因字体放大逻辑偷偷撑高顶部 - 若用
flex布局，确保父容器没意外的align-items: center或justify-content偏移
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
/* 可选：防 iOS 滚动粘滞 */
-webkit-overflow-scrolling: touch;
}
/* viewport 示例（放在 <head> 中） */
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">遇到 fixed 头部时顶部间距更明显？检查 top: 0 是否被覆盖
当设置 position: fixed; top: 0; 的头部仍离顶有缝隙，大概率是以下之一：
- 父级存在
transform、perspective或filter，触发了新的层叠上下文，导致top: 0相对目标错位 - 使用了
env(safe-area-inset-top)但未降级处理：iOS 状态栏高度会注入该变量，若没写top: env(safe-area-inset-top); top: 0;回退，旧版 Safari 会忽略整条规则 -
body有scroll-padding-top（比如为了scroll-margin-top锚点跳转），它会影响固定定位的参考系
调试技巧：快速定位谁在“顶起”页面
不要猜，直接用 Safari 或 Chrome DevTools 的移动端模拟器做三步排查：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具 → Elements 面板 → 逐级点击
html→body→ 第一个子容器，看右侧Computed中margin-top、padding-top、border-top是否非零 - 临时加
outline: 1px solid red;到body，观察红色线是否贴顶——不贴顶说明有外边距或父容器干扰 - 在控制台执行
getComputedStyle(document.body).marginTop，看返回值是不是"8px"或类似（iOS 默认值常为8px）
真正麻烦的不是初始空白，而是它和 safe-area-inset、scroll-behavior: smooth、第三方 UI 库的 reset 冲突。每次加新组件前，先确认它的 CSS 是否悄悄重写了 body 的 margin。
