html - 删除 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>

这是结果:

我想减少我的 <h1> 之间的空间和 <h2> ，我发现这样做的方法是设置 line-height在 h1至 0px .

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

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

Answer 1

标题h1到h6默认有margin，需要重新设置，设置为: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>