如何消除顶部多余的空格？

Question

我又是我了，因为我想学习的过程让我感到沮丧。 首先，每个浏览器在顶部都有多余的空间，在顶部输入图像描述 。 我试过在CSS中尝试body {overflow:auto;} ，但显然只在特定点之前起作用，并且消失了右边而不是顶部的多余空间。 我已经尝试过重置CSS中的边距和填充，但是没有运气。 同样由于某种原因，没有显示封面图像。 有任何建议吗？

您可以在这里检查项目： https ： //github.com/flukec777/MarsLandpage

Answer 1

您需要从line 26 <div class="col span-1-of-2 bg">删除.col类。

在css文件中编辑.col端口也会对其他标签产生影响，因为您也在文档的其他位置使用了该类。

Answer 2

多余的空间是由Grid.css中的.col类引起的。 .col类包含：

.col {
      display: block;
      float:left;
      margin: 1% 0 1% 1.6%;
     }

解决此问题的一种方法是删除或编辑.col类中的margin属性。 当然，您可以通过JavaScript动态地执行此操作。

Answer 3

顶部上方多余空间的原因是div，其标题内包含类.col.span-1-of-2.bg，我们可以使用margin删除此空间。

html, body {
    overflow: initial;
}

header .col.span-1-of-2.bg {
    margin-top: 0;
}