如何删除标题上方的空白？ [复制]答案

【问题标题】：How to remove empty space above header? [duplicate]如何删除标题上方的空白？ [复制]
【发布时间】：2014-08-21 05:09:57
【问题描述】：

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

<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;
}

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

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

【问题讨论】：

这能回答你的问题吗？ How can I remove space (margin) above HTML header?

标签： css header margin html-heading

【解决方案1】：

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

h1{
    margin: 0 0 15px;
}

【讨论】：

【解决方案2】：

这是由于您的 h1 标记的性质造成的。它会根据您使用的浏览器自动应用某种边距。

要消除差距，请在 CSS 中使用以下代码：

h1 {
margin: 0px;
}

将来您想使用 Google Chrome 或 Firefox+Firebug 并使用内置工具浏览网页中的所有元素。这将为您节省大量时间并提高效率。

【讨论】：

【解决方案3】：

默认情况下，h1 标签带有边距，您所要做的就是删除该边距，还有一些浏览器（如 Google chrome）会添加默认边距，因此您还必须从 body 中删除该边距标记。

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

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

希望对你有帮助

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

标题中的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;
}

这应该可以解决问题。

【讨论】：

【解决方案6】：

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

h1{
    margin-top: 0;
}

【讨论】：

【解决方案7】：

标题中的<h1> 标记有一个上边距，这会将您的<header> 标记向下推。

【讨论】：

【解决方案8】：

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

h1 {
  margin: 0;
}

编辑：

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

margin: 0 是margin: 0 0 0 0 的简写，它结合了所有边距方向：margin: top right bottom left。

【讨论】：