title: Removing space between h1 and h2
body: <p>I have stumbled across a problem that I can not seem to solve in any way, maybe I am using <code>div</code>s in a wrong way?       </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="greeting"&gt;
    &lt;h1&gt;Hi.&lt;/h1&gt;
    &lt;h2&gt;Select a group&lt;/h2&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the outcome: </p>
  
  <p><a href="https://i.stack.imgur.com/vQHWv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vQHWv.png" alt="SS"></a></p>
  
  <p>I want to decrease the space between my <code>&lt;h1&gt;</code> and <code>&lt;h2&gt;</code>, and I found out that the way to do that was to set <code>line-height</code> in <code>h1</code> to <code>0px</code>.</p>
  
  <p>But as I do that my entire page moves up like so:</p>
  
  <p><a href="https://i.stack.imgur.com/jzhiF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jzhiF.png" alt="SS"></a></p>
  
  <p>I want to keep the text at the same position as it was before I change the <code>line-height</code>. I am suspecting that I am using the div class function wrong. This is more of theoretical question.</p>