Question

我刚刚开始使用html构建网页，并为其制作了一个简单的标题。我希望标题完全沿着屏幕的边框，但我的标题周围有一个空白区域。这是它的样子：

我通过将标题的css，margin和border设置为0来更改了我的outline。但这似乎并没有完成工作和白色空间仍在那里。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <style type="text/css">
        h1{
            margin:0 auto;
            padding:20px;
            border:0;
            outline:0;
            background: #003399;
            color: #ffffff;
            font-family: "Calibri";
            font-weight: normal;
        }
    </style>
</head>
<body>
    <header>
        <h1>This is my website.</h1>
    </header>
</body>
</html>

我无法弄清楚我的错误是什么。请任何人帮忙。感谢您的关注。

Answer 1

默认情况下body标记需要一些CSS，只需为此

添加以下css即可

body {
    margin: 0px;
    padding: 0px;
}

Answer 2

添加此css

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

Answer 3

在我的所有项目中，我将此代码放在CSS文件的开头：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

所以我对边距，填充和大小有更多的控制（box-sizing: border-box使边框和填充在容器大小内部应用，而不是作为额外的大小，因此使用百分比大小更容易。

另一种选择是将normalize.css放在你的风格之前，这已经包含了像这样的常规修正。

如何在html页面中删除背景色标题周围的空间？

3 个答案: