video默认inline导致底部空白，需display:block或vertical-align:top；html/body需重置margin/padding；autoplay必须配合muted；object-fit:cover应配object-position:top。
video 元素默认有底部空白，不是 bug 是 inline 特性
HTML5 <video> 默认是 inline 元素，会像文字一样对齐基线（baseline），下方留出空间给字母「g」「y」等降部——所以即使设置了 height: 100vh，顶部也常“贴不上去”。这不是 CSS 写错了，是渲染机制本身导致的。
- 用
display: block直接干掉 inline 基线对齐行为，这是最干净的解法 - 或者改
vertical-align: top，但只对父容器是 inline/inline-block 时有效，容易漏掉上下文 - 别碰
line-height: 0或font-size: 0，治标不治本，还可能影响子元素
viewport 高度不准？检查 body 和 html 的 margin/padding
想让 <video> 贴顶并占满视口，常写 height: 100vh，但实际顶部仍有缝隙——大概率是 <html> 或 <body> 自带默认 margin 或 padding 在作祟。
- 必须显式重置：
html, body { margin: 0; padding: 0; height: 100%; } -
100vh是视口高度，但若父级没撑高，子元素设100%就会失效；100vh更可靠，但前提是它没被外层挤压缩小 - 移动端 Safari 对
100vh解析不稳定（地址栏收放时高度变化），真要严苛贴顶，考虑用 JS 动态读window.innerHeight设置内联 height
autoplay + muted 才能免交互自动播放，否则静音图标挡在左上角
想一打开页面视频就顶着屏幕播放，绕不开浏览器的自动播放策略：未静音的 <video> 必须由用户手势触发，否则会被拦截，且 Chrome/Firefox 会在左上角硬塞一个静音控件，破坏顶部对齐视觉。
- 加
autoplay和muted属性是底线：<video autoplay muted> - 别只写
autoplay—— 没muted，Chrome 会暂停并显示控件，位置固定、无法用 CSS 移除 - 如果业务必须带声音，只能放弃自动播放，改用按钮触发，或监听
click后调用play()方法
object-fit: cover 有时会让顶部裁切，别盲目套用
为让视频填满容器又不拉伸，很多人直接加 object-fit: cover，但它会居中裁剪——当视频宽高比和容器不一致时，顶部内容很可能被砍掉，反而违背“贴顶”初衷。
立即学习“前端免费学习笔记（深入）”；
- 真要顶边对齐，用
object-fit: cover配合object-position: top - 如果视频源比例固定（比如全是 16:9），更稳妥的是用
object-fit: fill+ 精确控制容器宽高比（如aspect-ratio: 16/9），避免裁切 - 注意 Safari 旧版本不支持
object-position，需测试兼容性
贴顶这事，表面是 CSS 对齐，背后卡在 HTML 渲染模型、浏览器策略、设备差异三层上。少一个 display: block，少一个 muted，甚至少一个 html { margin: 0 }，都会让顶部留白死活去不掉。
