Question

我刚刚开始学习HTML并创建了这个静态：

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/classes.css">
        <link rel="stylesheet" type="text/css" href="../css/ids.css">
        <title>Total Devastation</title>
    </head>

    <body>
        <h1 class="header-main">Total Devastation</h1>
        <div id="mainmenu">
            <ul>
                <li>
                <a href="">Hello!</a>
                </li>

                <li>
                <a href="">How</a>
                </li>

                <li>
                <a href="">Are</a>
                </li>

                <li>
                <a href="">You</a>
                </li>
            </ul>
        </div>
        <div id="body-main">
            <p>
            Hi there! Welcome to this newly created static RPG.
            </p>
        </div>
    </body>
</html>

我想让h1容器（类header-main）触及屏幕边缘，就像触摸右侧一样

这是css部分：

body {
    background:#aaa;
}

.header-main {
    background:#555;
    font-family:calibri;
    font-size:32pt;
    color:#eee;
    text-align:center;
    margin-left:0;
    padding:10px;
    width:100%;
}

Answer 1

默认情况下，身体将有8px的边距设置为0 ..所以你的h1容器触摸屏幕

Css

body{
background:#aaa;
margin:0;
padding:0;
}

如果你想让h1触及浏览器的顶部...将h1边距设置为0

.header-main {
    background:#555;
    font-family:calibri;
    font-size:32pt;
    color:#eee;
    text-align:center;
    margin:0;       /*changes done */
    padding:10px;
    width:100%;
}

Answer 2

在html，body标签中填充边距，填充为0

html, body
{
    margin: 0;
    padding: 0;
}

DEMO

Answer 3

试试这个

＆＃13;

body {
  background: #aaa;
  margin: 0;
}
h1 {
  margin: 0;
}
.header-main {
  background: #555;
  font-family: calibri;
  font-size: 32pt;
  color: #eee;
  text-align: center;
  margin-left: 0;
  padding: 10px;
  width: 100%;
}

＆＃13;

 <h1 class="header-main">Total Devastation</h1>
<div id="mainmenu">
  <ul>
    <li>
      <a href="">Hello!</a>
    </li>

    <li>
      <a href="">How</a>
    </li>

    <li>
      <a href="">Are</a>
    </li>

    <li>
      <a href="">You</a>
    </li>
  </ul>
</div>
<div id="body-main">
  <p>
    Hi there! Welcome to this newly created static RPG.
  </p>
</div>

＆＃13;

Answer 4

这里发生的事情很简单，您的浏览器会自动为整个文档添加8px的边距，因此当您通过以下CSS从html中删除它时：

html{
margin: 0;
}

你的问题应该解决。

Answer 5

只需添加此css：

 body{
    margin:0
}
 h1{
    margin:0    
}

由于浏览器的默认css。

Answer 6

    .header-main {
    background:#555;
    font-family:calibri;
    font-size:32pt;
    color:#eee;
    text-align:center;
    margin-left:0;
    padding:10px;
    width:100%;
    position:relative;
    left:0;
    top:0;

}

如何在html中制作h1标签触摸屏幕的边缘？

6 个答案:

DEMO