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

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;
}