Question

HTML noob here。

鉴于以下html和css文件，有人可以告诉我为什么我的标题不会拥抱视口的左边和上边缘吗？

换句话说，为什么灰色框上方及其左侧有空白区域，即使边距和边框设置为0？

picture of problem

.html文件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="css/site.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div id="wrap" >
        <div id="headerbar">
            <p>Header</p>
        </div>
    </div>
</body>

</html>

.css文件：

p {
    font-family:verdana;
    font-style: bold;
    font-weight: 300;
    font-size: 3em;
}

#headerbar {
    width:3000px;
    margin:0px;
    border:0px;
    padding:30px;
    background: grey;
    font-size: 1em;
}

Answer 1

margin: 8px上有默认body。您可以使用以下命令删除它：

body {margin: 0;}

注意：
您将border: 0; margin: 0;设置为div，这些是默认设置。你可以在那里删除它们。

Answer 2

给身体一个0余量。

body {margin: 0; padding: 0;}

Answer 3

在大多数浏览器中，正文具有默认边距。将其添加到您的css文件中：

body {
   margin: 0px;
}

为什么我的标题不是＆＃34;拥抱＆＃34;浏览器视口的边缘？

3 个答案: