如何删除 HTML 标头上方的空格（边距）？

Question

我正在创建一个网站。

我已经编写了 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>

原文由 odbhut.shei.chhele 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试：

 h1 {
    margin-top: 0;
}

您正在看到 margin collapses 的影响。

原文由 robertc 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试保证金顶部：

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

编辑：

现在我发现相对位置可能是一个更好的选择：

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

原文由 benbai123 发布，翻译遵循 CC BY-SA 3.0 许可协议