如何使html中的h1标记接触屏幕边缘？_Html_Css

如何使html中的h1标记接触屏幕边缘？

html css

如何使html中的h1标记接触屏幕边缘？,html,css,Html,Css,我刚开始学习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>

我刚开始学习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>

默认情况下，body的边距为8px，将其设置为0。因此h1容器会接触屏幕

Css

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

如果您想触摸浏览器的顶部。。。将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%;
}

在html和正文标记中设置边距，填充为0

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

试试这个

正文{
背景：#aaa；
保证金：0；
}
h1{
保证金：0；
}
.总管{
背景:#555；
字体系列：calibri；
字号：32pt；
颜色：#eee；
文本对齐：居中；
左边距：0；
填充：10px；
宽度：100%；
}

彻底毁灭











你好！欢迎来到这个新创建的静态RPG。

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

html{
margin: 0;
}

您的问题应该得到解决。

只需添加以下css：

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

因为浏览器的默认css。

在html中使用css重置代码。。。它将覆盖默认的css broswer样式。。。这是重置代码的链接

html{
margin: 0;
}

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