koen koen - 3 years ago 39
CSS Question

Relative padding is relative to what?

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download