h1 元素不需要的上边距

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

结果：

在此处输入图像描述

我期待 h1 元素与视图的顶部边缘对齐。

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

在此处输入图像描述

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

谢谢

Answer 1

您需要添加margin:0; ：

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

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

Answer 2

浏览器本身会为每个元素设置默认样式。 其中包括标题，标题的顶部和底部都有一定的余量-如果您不需要它们，则需要自己删除它们。

不幸的是，即使W3C给出了建议，这些默认样式也会因浏览器而异，这就是为什么开发人员尝试在开始添加自己的默认样式之前对其进行重置或对其进行规范化的原因。 前两者之间有区别。

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

这是因为默认的 h1“行高”。 您可以添加任何所需值的 line-height 属性，如下所示：

h1{
    line-height: 1em;
}

Answer 7

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

Answer 8

你可以做：

h1{
    margin:0
}

h1 元素不需要的上边距

问题描述

8 个解决方案

解决方案1
3 已采纳 2014-11-13 22:29:16

解决方案2
3 2014-11-13 22:29:28

解决方案3
2 2014-11-13 22:29:44

解决方案4
0 2014-11-13 22:45:51

解决方案5
0 2014-11-14 05:52:11

解决方案6
0 2022-09-07 15:56:08

解决方案7
-1 2014-11-13 22:29:35

解决方案8
-1 2014-11-14 06:06:09

h1 元素不需要的上边距

问题描述

8 个解决方案

解决方案1 3 已采纳 2014-11-13 22:29:16

解决方案2 3 2014-11-13 22:29:28

解决方案3 2 2014-11-13 22:29:44

解决方案4 0 2014-11-13 22:45:51

解决方案5 0 2014-11-14 05:52:11

解决方案6 0 2022-09-07 15:56:08

解决方案7 -1 2014-11-13 22:29:35

解决方案8 -1 2014-11-14 06:06:09

解决方案1
3 已采纳 2014-11-13 22:29:16

解决方案2
3 2014-11-13 22:29:28

解决方案3
2 2014-11-13 22:29:44

解决方案4
0 2014-11-13 22:45:51

解决方案5
0 2014-11-14 05:52:11

解决方案6
0 2022-09-07 15:56:08

解决方案7
-1 2014-11-13 22:29:35

解决方案8
-1 2014-11-14 06:06:09