css h1元素不需要的上边距

rbpvctlc 于 2022-12-20 发布在其他

关注(0)|答案(8)|浏览(137)

我得到了一个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中删除“position”、“left”和“top”属性，那么h1元素就会如预期的那样与视图的顶部对齐：

为什么会这样？我用的是 chrome 合金。
谢啦，谢啦

css

来源：https://stackoverflow.com/questions/26919641/unwanted-top-margin-for-h1-element

8条答案

按热度按时间

mf98qq941#

您需要添加margin:0;：

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

JSF中间文件：http://jsfiddle.net/tb39am7s/

赞(0）回复(0）举报 2022-12-20

bqucvtff2#

浏览器会为每个元素设置默认的样式，包括标题，它们在顶部和底部都有一些边距--如果你不需要它们，你需要自己删除它们。
不幸的是，这些默认的风格因浏览器而异，即使W3C提供了recommendation，这也是为什么开发人员在添加自己的风格之前会尝试使用reset default styles或normalize it。

赞(0）回复(0）举报 2022-12-20

uoifb46i3#

删除h1上的上边距：
http://jsfiddle.net/austinthedeveloper/wwzxn8gx/

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

赞(0）回复(0）举报 2022-12-20

yh2wf1be4#

h1元素有一个默认的边距。在h1属性中添加margin: 0;应该可以解决边距问题。我相信边距是基于包含它的元素的。

赞(0）回复(0）举报 2022-12-20

3j86kqsm5#

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

//style

div.container{
padding: 0;
}

h1{
margin-top: 0;
}

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

赞(0）回复(0）举报 2022-12-20

uyhoqukh6#

这发生因为默认h1“行高”.你可以添加行高属性与任何想要的值像这样：

h1{
    line-height: 1em;
}

赞(0）回复(0）举报 2022-12-20

vvppvyoh7#

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

赞(0）回复(0）举报 2022-12-20

w8f9ii698#

您可以：

h1{
    margin:0
}

赞(0）回复(0）举报 2022-12-20

我来回答

css h1元素不需要的上边距

8条答案

相关问题

热门标签

最新问答