我怎样才能摆脱顶部多余的空白？答案

【问题标题】：How can I get rid of extra white space at the top?我怎样才能摆脱顶部多余的空白？
【发布时间】：2019-07-08 18:23:40
【问题描述】：

又是我，当我试图学习时，我遇到了令人沮丧的部分。首先，每个浏览器的顶部都有额外的空间enter image description here。我已经在 css 中尝试了body {overflow:auto;}，但显然只能工作到某个点，并且消除了右侧的额外空间，而不是顶部的额外空间。我已经尝试在我的 css 中重置边距和填充，但没有运气。另外由于某种原因，封面图片没有显示。有什么建议吗？

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

【问题讨论】：

Removing body margin in CSS的可能重复
您需要添加body { margin: 0; padding: 0 }
在我的 css 代码的一开始就已经在 * 选择器中拥有它
在这种情况下，将主体的边距和填充设置为 0 将不起作用，因为问题在于包裹导航的 div 的 css。正文已经有 0 的边距和填充（AFAIK）并且边距和填充默认情况下不被继承。此外，在这种情况下，通用选择器不适用于 div 的边距，因为 div 类的边距设置将覆盖通用选择器的边距设置。
您使用的是哪种浏览器？该图像适用于我尝试过的所有浏览器。

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

谢谢，是的，这就是问题所在。完全忘记了我网格中的那些设置

【解决方案3】：

顶部有多余空间的原因是 div 带有 .col.span-1-of-2.bg 类的标题，我们可以使用 margin 删除这个空间。

html, body {
    overflow: initial;
}

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

【讨论】：