如何删除标题上方的空格？

Question

我正在创建一个网站.我编写了html部分,现在我正在编写样式表.但是我的标题总是有一些空间.我无法删除它.

我的HTML和CSS代码如下.

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

这是我的HTML代码.

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

这是我的css代码.

Answer 1

尝试:

h1 {
    margin-top: 0;
}

您正在看到保证金崩溃的影响.

Answer 2

尝试margin-top:

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

编辑:

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

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

Answer 3

当您开始创建网站以重置所有边距和填充时,这是一种很好的做法.所以我建议开始只是简单的做:

* { margin: 0, padding: 0 }

这将使所有元素的边距和填充为0,然后您可以根据需要设置它们的样式,因为每个浏览器都有不同的默认边距和元素的填充.

Answer 4

我通过添加边框解决了空间问题，并通过设置负边距来删除。不知道潜在的问题是什么。

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

Answer 5

为了完整起见，更改overflow为auto/hidden也应该可以解决问题。

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>