Question

If I style an <h1> element with padding: 1.2em or padding: 10%, is that relative to the:

1. font-size of the <h1> element?
2. height of the <h1> element?
3. padding of the parent element?
4. something else?

And is it different for em and %?

Answer 1

It is indeed different for em and %:

Ems

The padding size is relative to the calculated font size of that element.

So, if your <h1>’s calculated font size is 16px, then 1.2 ems of padding = 1.2 × 16 pixels = 19.2 pixels.

Percentages

The padding size is relative to the width of that element’s content area (i.e. the width inside, and not including, the padding, border and margin of the element).

So, if your <h1> is 500px wide, 10% padding = 0.1 × 500 pixels = 50 pixels.

(Note that top and bottom padding will also be 10% of the width of the element, not 10% of the height of the element.)