HTML <video> 元素导致它和下一个元素之间有空格

Question

我有一个视频作为页面的背景。视频正是它需要的地方，但在它和下一个元素之间造成了巨大的差距。当我检查元素时，没有边距或填充，只有大小正确的视频。我不确定差距从何而来或如何消除差距。

<video loop muted autoplay class="bg-video">
  <source src="/assets/images/test.MP4" type="video/webm">
</video>
<h2 class="text-center">NEWS</h2>

这就是 HTML。那里只有视频和下一个元素，即 h2。

CSS:

.bg-video {
 position: relative;
 z-index: -100;
 overflow: hidden;     
 left: 50%;
 transform: translate(-50%, -50%);
}

screenshot of the space (屏幕截图已调整大小)

Answer 1

您可以尝试将您的位置切换为固定位置而不是相对位置，这会将它从元素流中移除并且它不应该能够影响任何其他元素。我做了类似的事情，CSS 是这样的:

#bgvid { 
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}