HTML5视频怎么贴顶显示_新手入门顶部对齐技巧【技巧】

video默认inline导致底部空白，需display:block或vertical-align:top；html/body需重置margin/padding；autoplay必须配合muted；Object-fit:cover应配object-position:top。

video 元素默认有底部空白，不是 bug 是 inline 特性

html5 <video></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></video> 贴顶并占满视口，常写 height: 100vh，但实际顶部仍有缝隙——大概率是 或 自带默认 margin 或 padding 在作祟。

• 必须显式重置：html, body { margin: 0; padding: 0; height: 100%; }
• 100vh 是视口高度，但若父级没撑高，子元素设 100% 就会失效；100vh 更可靠，但前提是它没被外层挤压缩小
• 移动端 safari 对 100vh 解析不稳定（地址栏收放时高度变化），真要严苛贴顶，考虑用 js 动态读 window.innerHeight 设置内联 height

autoplay + muted 才能免交互自动播放，否则静音图标挡在左上角

想一打开页面视频就顶着屏幕播放，绕不开浏览器的自动播放策略：未静音的 <video></video> 必须由用户手势触发，否则会被拦截，且 chrome/firefox 会在左上角硬塞一个静音控件，破坏顶部对齐视觉。

• 加 autoplay 和 muted 属性是底线：<video autoplay muted></video>
• 别只写 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 }，都会让顶部留白死活去不掉。