删除 h1 和 h2 之间的空格

Question

我偶然发现了一个我似乎无法以任何方式解决的问题，也许我使用 div 的方式不对？

 .greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  line-height: 0px;
  text-align: center
}

 <div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

这是结果：

I want to decrease the space between my <h1> and <h2> , and I found out that the way to do that was to set line-height in h1 至 0px 。

但是当我这样做时，我的整个页面都像这样向上移动：

我想将文本保持在与更改 line-height 之前相同的位置。我怀疑我错误地使用了 div 类函数。这更多是理论问题。

原文由 user3552616 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

headings h1 to h6 have margin by default, so you need to reset it, setting: margin:0 .

 .greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center;
  margin: 0
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  text-align: center;
  margin: 0
}

 <div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

原文由 dippas 发布，翻译遵循 CC BY-SA 3.0 许可协议