Removing a space between a header and a paragraph

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?

https://stackoverflow.com/questions/67342819/removing-a-space-between-a-header-and-a-paragraph May 01, 2021 at 12:14PM