删除h1和h2之间的空间 [英] Removing space between h1 and h2

问题描述

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

I have stumbled across a problem that I can not seem to solve in any way, maybe I am using divs in a wrong way?

.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>之间的空间，我发现这样做的方法是将h1中的line-height设置为0px.

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 to 0px.

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

But as I do that my entire page moves up like so:

我想保持文本与更改line-height之前的位置相同.我怀疑我使用的div类功能错误.这更多是理论上的问题.

I want to keep the text at the same position as it was before I change the line-height. I am suspecting that I am using the div class function wrong. This is more of theoretical question.

推荐答案

h1到h6的标题默认情况下具有margin，因此您需要将其重置，设置为margin:0.

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>

这篇关于删除h1和h2之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！