h1 元素不需要的上边距答案

【问题标题】：Unwanted top margin for h1 elementh1 元素不需要的上边距
【发布时间】：2015-01-11 05:36:17
【问题描述】：

我得到一个 h1 元素的不需要的上边距，不知道为什么。这是我的html：

<body>
  <div class="content"> 
    <h1>Header</h1>
    <p>Paragraph 1.</p>
    <p>Paragraph 2.</p>
    <p>Paragraph 3.</p>
  </div>
</body>

这是我的 CSS：

body {
  background-color: yellow;
  padding: 0px;
  margin: 0px;
}

h1 {
  background-color: lime;
}

.content {
  background-color: pink;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px;
  margin: 0px;
}

结果：

我希望 h1 元素与视图的顶部边缘对齐。

如果我从 css def 中删除“位置”、“左”和“顶部”属性，则 h1 元素会按预期对齐到视图的顶部：

为什么会这样？我正在使用铬。

谢谢

【问题讨论】：

Erm，所以为 H1 添加margin-top: 0;。这里最大的谜团是什么？
是的，我正试图了解为什么会发生这种情况。

标签： html css

【解决方案1】：

您需要添加margin:0;:

h1 {
    margin:0;
    background-color: lime;
}

JSFiddle：http://jsfiddle.net/tb39am7s/

【讨论】：

【解决方案2】：

对于每个元素，浏览器本身都会设置默认样式。这包括标题，它们在顶部和底部都有一些边距 - 你需要自己删除它们以防你不需要它们。

不幸的是，这些默认样式因浏览器而异，即使 W3C 提供recommendation，这就是为什么开发人员在开始添加自己的之前尝试reset default styles 或normalize it。有difference between previous two。

【讨论】：

【解决方案3】：

如果您使用position: absolute，请确保在父元素上指定position: relative，它应该是相对的（在您的情况下，这将是<body>），看看这是否有帮助。

【讨论】：

【解决方案4】：

删除 h1 的上边距：

http://jsfiddle.net/austinthedeveloper/wwzxn8gx/

h1 {
    background-color: lime;
    margin-top: 0;
}

【讨论】：

【解决方案5】：

h1 元素具有默认边距。将margin: 0; 添加到您的 h1 属性应该可以解决您的保证金问题。我相信边距是基于包含它的元素。

【讨论】：

【解决方案6】：

<div class="container">
<h1>HEADER</h1>
</div>

//style

div.container{
padding: 0;
}

h1{
margin-top: 0;
}

你也可以使用 normalize.css 来重置一些标签的默认值。 http://necolas.github.io/normalize.css/

【讨论】：

【解决方案7】：

你可以这样做：

h1{
    margin:0
}

【讨论】：