Removing space between h1 and h2

Question

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>

This is the outcome:

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:

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.

Imprint

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>

Brian

Answer 2

HTML heading tags have some default CSS values applied in most browsers. Following are the values of h1 and h2 that are applied to them by default, so you need to override the margin-bottom of h1 and margin-top of h2 if you want to decrease the spacing between your h1 and h2.

h1 { 
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

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

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

Dannydannye

Answer 3

Just add the following lines

.greeting h1 {
  margin:0px;
  line-height:35px;
}
.greeting h2 {
  margin:0px;
  line-height:35px;
}

Postilion

Answer 4

If you just want you to assign the margin only for this block you do not need to define it globally you can just do the same this using inline CSS

<h1  style="margin-bottom: 0">Hi</h1>
<h2  style="margin-top: 0">Select a group</h2>

Foal