我正在創建一個網站。

我已經寫了HTML部分，現在我正在寫樣式表。但是我的頭球上方總是有一些空間。怎么才能去掉？

下面是我的HTML和CSS代碼。

body{
  margin: 0px;
  padding: 0px;
}

header{
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}

<header>
  <h1>OQ Online Judge</h1>
  <form action="<?php echo base_url();?>/index.php/base/si" method="post">
    <label for="email1">E-mail : </label><input type="text" name="email" id="email1">
    <label for="password1">Password : </label><input type="password" name="password" id="password1">
    <input type="submit" name="submit" value="Login">
  </form>
</header>

嘗試:

h1 {
    margin-top: 0;
}

你會看到利潤崩潰的影響。

嘗試頁邊距-頂部:

<header style="margin-top: -20px;">
    ...

編輯:

現在我發現相對位置可能是一個更好的選擇:

<header style="position: relative; top: -20px;">
    ...

當你開始創建網站時，重置所有的邊距和填充是一個很好的做法。所以我建議一開始就做簡單的事情:

* { margin: 0, padding: 0 }

這將使所有元素的邊距和填充都為0，然后您可以隨意設置它們的樣式，因為每個瀏覽器都有不同的默認邊距和元素填充。

我通過添加邊框來解決空間問題，并通過設置負邊距來刪除is。但我不知道潛在的問題是什么。

header {
  border-top: 1px solid gold !important;
  margin-top: -1px !important;
}

為了完整起見，將溢出改為自動/隱藏也應該可以做到。

body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
  overflow: auto;
}

<header>
  <h1>OQ Online Judge</h1>

  <form action="<?php echo base_url();?>/index.php/base/si" method="post">
    <label for="email1">E-mail :</label>
    <input type="text" name="email" id="email1">
    <label for="password1">Password :</label>
    <input type="password" name="password" id="password1">
    <input type="submit" name="submit" value="Login">
  </form>
</header>

為了防止將來出現意外的邊距和其他特定于瀏覽器的行為，我建議在樣式表中包含reset.css。

請注意，您必須設置h[1..6]字體大小和重量，使標題看起來像標題之后，以及許多其他事情。

可能是h1標簽導致了問題。應用保證金:0；應該可以解決這個問題。

但是你應該為每個新項目使用CSS重置來消除瀏覽器的一致性和類似的問題。可能最著名的是埃里克·梅爾的《http://meyerweb.com/eric/tools/css/reset/》

這個css允許chrome和firefox正常呈現我頁面上的所有其他元素，并刪除了h1標簽上方的空白。此外，在調整頁面大小時，em比px效果更好。

h1 {
  margin-top: -.3em;
  margin-bottom: 0em;
}

在HTML中，剪切上邊距(以此為例):

<h2 style="margin:0.3em 0">

body{
  margin: 0px;
  padding: 0px;
}

h1{
  margin: 0px 0px 0px 0px;
}

header{
  margin: 0px 0px 0px 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}

<header>
  <h1>OQ Online Judge</h1>
  <form action="<?php echo base_url();?>/index.php/base/si" method="post">
    <label for="email1">E-mail : </label><input type="text" name="email" id="email1">
    <label for="password1">Password : </label><input type="password" name="password" id="password1">
    <input type="submit" name="submit" value="Login">
  </form>
</header>