Question

如何摆脱网页顶部和标题之间的空间？
这是我的代码：

＆＃13;

body {
    margin: 0px;
    padding: 0px;
}
        
#Header {
    background-image: url(space.jpg);
    color: white;
    font-size: 40px;
    text-align: center;
    height: 70px;
    margin-top: 0px;
}

＆＃13;

<div id="Header">
  <p> Weird Title </p>
</div>

<a href ="practice.html"> Click here </a>

＆＃13;

我尝试过保证金，但是我做错了是不行的。

Answer 1

您必须将margin-top: 0规则应用于p div中的#Header元素，因为p元素而不是{{}创建了边距1}}。

作为提示，您可以使用浏览器上的开发人员工具检查这些问题，选择一个元素并检查右侧窗格中的div / border / margin值

padding

Answer 2

<p> - 元素在所有主流浏览器中都有margin-top的默认1em。

您必须重置此默认边距才能获得所需的结果。

#Header > p, /* NEW LINE */
body {
    margin: 0px;
    padding: 0px;
}

#Header {
    /*background-image: url(space.jpg); make thing visible for snippet*/
    background: #999; /*make thing visible for snippet*/
    color: white;
    font-size: 40px;
    text-align: center;
    height: 70px;
    margin-top: 0px;
}

<div id="Header">
  <p> TITLE </p>
</div>

<a href ="practice.html"> Click here </a>

注意：许多CSS属性都有默认值。要解决这个问题，您可以重置或normalize CSS。

Answer 3

您应该将margin-top属性设置为0以更正间距。

Answer 4

您可以使用* CSS选择器重置DOM中所有元素的边距和填充，如下面的代码段所示。此外，您只需要在使用非零值时在CSS中指定单位。

* {
    margin: 0;
    padding: 0;
}
        
#Header {
    background-image: url(space.jpg);
    background-color: black;
    color: white;
    font-size: 40px;
    text-align: center;
    height: 70px;
}

<div id="Header">
  <p> Weird Title </p>
</div>

<a href ="practice.html"> Click here </a>

请注意，虽然这是一个快速简便的解决方案，但它可以为较大的网站提供不必要的开销，因为浏览器渲染代理必须更新文档中的每个元素。

如何摆脱标题上方的空间

4 个答案: