CODEWITHSUNDEEP
csspadding
koen
koen

Reputation: 13767

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 %?

Upvotes: 19

Views: 23207

Answers (3)

Paul D. Waite
Paul D. Waite

Reputation: 98926

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

Upvotes: 23

Rich O&#39;Kelly
Rich O&#39;Kelly

Reputation: 41767

You may find the following useful:

  • “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

  • Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

  • Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

  • Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

Taken from here.

Upvotes: -1

PaulF
PaulF

Reputation: 79

"em" units are always in reference to font size. See http://w3schools.com/cssref/css_units.asp for a reference of CSS units.

Upvotes: 0

Related Questions