如何去除网页body与首个div之间的顶部空白？

我一直在四处寻找问题的解决方案，但似乎都不起作用。我的网站顶部始终存在间隙，针对该问题的各种解决方法都无效。我在Firefox中调试网站时发现，body与第一个div之间存在空白（我尝试将代码放在同一行，但毫无作用）。请问有什么方法可以去除这个空白？（我可以在Firefox调试工具中移除它，此时空白就会消失）

我的HTML和CSS代码 #

CSS代码 #

/* CSS Document */

html,
body {
  height: 100%;
}

* {
  overflow: auto;
  margin: 0;
}

body {
  margin: 0;
  background-color: #111111;
  padding: 0;
  font-family: verdana;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 400;
  color: white;
  text-align: left;
}

video {
  width: 100%;
  z-index: 0;
}

.menubar {
  left: 100;
}

.ulmenubar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.ulmenubar a {
  float: left;
}

.space {
  margin: 0;
  padding: 0;
}

.rightside {
  float: right;
}

.ulmenubar a {
  display: block;
  color: whitesmoke;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.ulmenubar a:hover {
  color: grey;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #181818;
}

::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 10px;
}

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

#contact {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

#cover {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 5;
  width: 100%;
  height: 100%;
  display: none;
}

HTML代码 #

<div class="menubar">
  <ul class="ulmenubar">
    <div class="rightside">
      <a href="#home" class="active">Home</a>
      <a href="#vids">Portfolio</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </ul>
</div>
<div class="space"><video id="background-video" autoplay="" loop="" muted=""><source src="vid.mp4" type="video/mp4"></video></div>
<div id="vids"></div>
<div class="row">
  <div class="column">
    <img src="https://media0.giphy.com/media/xT8qBoDhee6aWOhLqw/giphy.gif?cid=790b7611a86749120009311d9c18651c96962c8e7e27def2&amp;rid=giphy.gif&amp;ct=g" alt="Sea" style="width:100%">
  </div>
  <div class="column">
    <a onclick="openWin()"><img src="https://media4.giphy.com/media/UxTZDNv0Zej4s/giphy.gif?cid=790b76118b066a194adc23988667623a5aea3c7b55f3c44b&amp;rid=giphy.gif&amp;ct=g" alt="Forest" style="width:100%"></a>
  </div>
  <div class="column">
    <img src="https://media4.giphy.com/media/l41lQIclE3lItAlfq/giphy.gif?cid=ecf05e47mgmmt0kas0kp9zc0435gcanw878chwmk129z9uhf&amp;rid=giphy.gif&amp;ct=g" alt="Sky" style="width:100%">
  </div>
</div>

解决方案 #

1. 移除全局overflow: auto
   你给所有元素设置了overflow: auto，这会让浏览器为每个元素预留滚动空间（哪怕内容没超出容器），这是顶部间隙的核心原因。修改全局样式：

* {
  margin: 0;
  /* 删除 overflow: auto */
}

如果特定元素需要滚动条，单独给它们设置overflow: auto即可。

2. 修正HTML结构（可选但规范）
   ul标签的直接子元素必须是li，你当前直接放div不符合HTML规范，虽然不直接导致间隙，但建议修正：

<ul class="ulmenubar">
  <li class="rightside">
    <a href="#home" class="active">Home</a>
    <a href="#vids">Portfolio</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </li>
</ul>

完成以上两步后，顶部的空白间隙即可消除。

内容的提问来源于stack exchange，提问作者Bobjoerules