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

I have a title with slogun 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 f*ks up the "hitbox" of the slogun.

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

*{    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 Slogun 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?