Removing a space between a header and a paragraph

Question

I'm making a website and I'm trying to make a logo-like header, with two differently sized lines of text stacked on top of each other. In my case, I'm using a <p> on top of a <h1>. However, there is a big gap between the two lines of text, which I do not want. I've tried setting margin and padding to 0 via CSS, which did reduce the size of the gap but not by much. I've also tried setting line-height as well, making no change.

Here's my code so far:

    <style>
      body {
        background: black;
        color: white;
        text-align: center;
        font-family: 'Lora', serif;
      }
      h1 {
        font-size: 58px;
      }
      p {
        font-size: 30px;
      
      }
      .heading {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <div class="heading">
      <p>LINE 1</p>
      <h1>LINE 2</h1>
    </div>

I'm not sure what to do at this point. Has anyone got a solution?

Answer 1

Change .heading { to .heading h1, .heading p {

Answer 2

You can use line-height.

From MDN:

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

Code:

<style>
    body {
        background: black;
        color: white;
        text-align: center;
        font-family: 'Lora', serif;
    }
    h1 {
        font-size: 58px;
    }
    p {
        font-size: 30px;
    }
    .heading {
        margin: 0px;
        padding: 0px;
        line-height: 5px;
    }
</style>
<div class="heading">
    <p>LINE 1</p>
    <h1>LINE 2</h1>
</div>