How can I change <h1> through <h6> to have same padding as <p> using em instead of px while keeping them all the same?

Question

No code, just a simple concept I need help with:

I want the padding above/below all text items (h1-h6, p, blockquote, code, etc.) to be the same. I want it to be 1em=16px. But, if I set them all to have 1em paddings then the larger-text items like h1 have more padding because it's 1em relative to h1's font-size. How can I make them all have it be 1em relative to p's font-size?

I don't want to use pixels as a set width because then doubling the page's text to 1em=32px size wouldn't double the padding making it half what it needs to be. How can I accomplish this?

Answer 1

You can use other unit like rem, ch, ex