Question

我有一个非常简单的标题：

<header>
    <h1>Hello Everybody</h1>
</header>

我有这个CSS：

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

header {
    background:lightgray;
    margin:0;
    padding:0;
    height:100px;
    position:relative;
}

但是，我无法将标题放在页面顶部。还剩下一些空白。

我不知道为什么会这样。请帮忙。

Answer 1

这是因为您的<h1>仍然有边距。

h1 {
  margin: 0;
}

编辑：

快速说明一下，如果您只想删除上边距，请执行下面@amol发布的内容margin-top。

margin: 0是margin: 0 0 0 0的简写，其中包含所有边距指示：margin: top right bottom left。

Answer 2

标头中的h1标记具有默认的.67em边距。您需要将h1代码设置为margin-top: 0px;才能摆脱额外的空白区域。

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

header {
    background:lightgray;
    margin:0;
    padding:0;
    height:100px;
    position:relative;
}

h1{
    margin-top: 0px;
}

这应该可以解决问题。

Answer 3

标题中的<h1>标记有一个上边距，可以推动<header>代码。

Answer 4

标题标签有默认边距，您可以使用以下代码

h1{
    margin-top: 0;
}

Answer 5

这就是为什么最好使用重置css文件来消除浏览器应用的默认格式：http://www.cssreset.com/。

Answer 6

仅使用下边距，删除上边距

h1{
    margin: 0 0 15px;
}

Answer 7

默认情况下，h1标记带有边距，您只需删除该边距，Google Chrome等浏览器也会添加默认边距，因此您还必须从{ {1}}标记。

body

我希望这有帮助

Answer 8

这是由于您的h1标签的性质。它会根据您使用的浏览器自动应用某种保证金。

要消除差距，请在CSS中使用以下内容：

h1 {
margin: 0px;
}

对于未来，您希望使用Google Chrome或Firefox + Firebug，并使用内置工具查看网页中的所有元素。它可以为您节省大量时间并提高效率。

如何删除标题上方的空白区域？

8 个答案: