Question

我正在制作一个网页，但我似乎无法将我的标题div放在页面的顶部。它上面总有一点差距。我试过四处寻找，但尝试过的所有解决方案都不起作用。

＆＃13;

#body {
    margin: 0 !important; <!--I thought these "importants" would fix it -->
    padding: 0 !important;
}

#header {
    margin: 0;
    padding: 0;
    height: 80px;
    width: auto;
    background-color: #3385FF;
    font-family: 'Cabin', serif;
    font-size: 60px;
    text-align: center;
}

＆＃13;

<link href='https://fonts.googleapis.com/css?family=Cabin:400,600' rel='stylesheet' type='text/css'>
<body>
    <div id="header"><p id="header_text">The_Grits</p></div> <!-- This is the div I want at the top of the page. -->
</body>

＆＃13;

提前致谢！

编辑：现在已经回答了问题，无论如何都要感谢。

Answer 1

您需要从正文中删除ID选择器，并删除应用于段元素的边距。

删除应用于＆lt; p ＆gt;的用户代理默认边距。元素和＆lt; 正文＆gt;添加此代码：

      body, p {
        margin: 0; 
      }

      #header {
        margin: 0;
        padding: 0;
        height: 80px;
        width: auto;
        background-color: #3385FF;
        font-family: 'Cabin', serif;
        font-size: 60px;
        text-align: center;
      }

Answer 2

首先，#body匹配id设置为body的元素，您没有这些元素，因此它完全是多余的（它应该是只是body）。其次，＆＃34; The_Grits＆＃34;在p之内，增加了自己的余量。添加

#header_text { margin: 0 }

到您的CSS。

参见演示：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Cabin:400,600' rel='stylesheet' type='text/css'>
    <!--Above imports the font I'm using-->
    <title>The_Grits Programming</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      
      #header_text { margin: 0 }

      #header {
        margin: 0;
        padding: 0;
        height: 80px;
        width: auto;
        background-color: #3385FF;
        font-family: 'Cabin', serif;
        font-size: 60px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="header"><p id="header_text">The_Grits</p></div> <!-- This is the div I want at the top of the page. -->
  </body>
</html>

＆＃13;

Answer 3

您的段落p具有默认保证金，因为您错过了在您的css规则_text中添加#header。

试试这个代码段：

＆＃13;

#body {
    margin: 0;
    padding: 0;
}

#header_text {
  margin: 0;
  padding: 0;
  height: 80px;
  width: auto;
  background-color: #3385FF;
  font-family: 'Cabin', serif;
  font-size: 60px;
  text-align: center;
}

＆＃13;

 <div id="header">
   <p id="header_text">The_Grits</p>
</div>

＆＃13;

Answer 4

因为您必须添加：p {margin:0px;}或添加#header_text { margin:0px }

创建新样式表时，请尝试将所有元素padding和margin重置为0px。这对你有帮助。

http://jsfiddle.net/bpmck3wt/

Answer 5

 #header {
    display:block;
    position:absoulute;
    top:0;
    right:0;
    left:0;
    margin: 0;
    padding: 0;
    height: 80px;
    background-color: #3385FF;
    font-family: 'Cabin', serif;
    font-size: 60px;
    text-align: center;
  }

为什么不指定位置和显示？

为什么我的div不在页面顶部？

5 个答案: