Relative padding is relative to what?

Question

If I style an

element with padding: 1.2em or padding: 10%, is that relative to the:

1. font-size of the &l

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

’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

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.)