Question

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

结果：

enter image description here

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

如果我删除＆＃34;位置＆＃34;，＆＃34;左＆＃34; ＆＃34; top＆＃34;来自css def的属性，然后h1元素按预期对齐到视图的顶部：

enter image description here

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

由于

Answer 1

您需要添加margin:0;：

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

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

Answer 2

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

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

Answer 3

删除h1上的上边距：

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

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

Answer 4

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

Answer 5

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

//style

div.container{
padding: 0;
}

h1{
margin-top: 0;
}

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

Answer 6

Whoh！答案是：

h1{
margin:0
}

你真的问过吗？因为，我无法相信你不知道margin。我看到你用这个：

body{
    margin: 0px;
}

或尝试获得更多答案？

Answer 7

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

h1元素的不需要的上边距

7 个答案: