How to adjust line height without messing up the text's "hitbox"

I have a title with slogan underneath in my header.

However, by default those 2 lines of text have WAY too much space between them, so I figured id use line height, which fixes the issue perfectly. However, doing so negatively affects the "hitbox" of the slogan.

I want to use flexbox with justify-content to center both vertically inside of my header, but with the messed-up slogan "hitbox" this no longer works, as it centers the main title and the newly 2px tall hitbox of the 20px tall slogan

*{
    margin: 0;
    padding: 0;
}

header{
    text-align: center;
    background-color: rgb(61, 61, 61);
    padding: 15px;
}

/* this is where i would place the line height. remove comment tags to see result */
/* header p{
    line-height: 5px;
} */

<header>
    <h1>I'm a centered Title</h1>
    <p>Cool Slogan underneath!</p>
</header>

SCREENSHOTS FOR "HITBOX" EXPLANATION ig..

• Blue hitbox containing title and slogun.. neat

  

• Blue hitbox after line height.. yikes

  

How do I get my slogun and title closer together without messing up?

How about adding the line-height to the Header itself and not the p?

*{
    margin: 0;
    padding: 0;
}

header{
    text-align: center;
    background-color: rgb(61, 61, 61);
    padding: 15px;
    line-height: 20px;
}

<header>
    <h1>I'm a centered Title</h1>
    <p>Cool Slogun underneath!</p>
</header>