Tuesday, June 29, 2010

CSS Units of Measurement absolute vs relative value

SkyHi @ Tuesday, June 29, 2010
You can measure CSS property values in one of two ways:
  • As an absolute value

  • As a relative value.

Absolute values have a fixed, specific value. They let you, the page creator, be exact in your measurements and control the display of your Web pages.

Example: The font size might be 14 point.

When you are using absolute values always remember that the reader might be viewing your page in a different environment from what you expect.

Relative values have no fixed, specific value. Rather, they are calculated in comparison to a current value.

Example: Type size might be larger, smaller, bolder, or lighter. Indent might be specified in em spaces, which vary with the display size of the text.

Because Web pages are viewed in so many different ways, it is often a good idea to use relative values. It gives you less absolute control but it often creates a better experience for your readers and lets your page flow dynamically.

Absolute Measurement

pointsptfont-size: 12pt
There are 72 points to an inch, 12 points to a pica.
picaspctext-indent: 2pc
There are 6 picas to an inch.
centimeterscmtext-indent: 4cm
inchesintext-indent: 1in
millimetersmmtext-indent: 8cm


Relative Measurement

pixelspxtext-indent: 30px
A pixel is one picture element on the display monitor; there are typically between 72 and 90 pixels/inch.
em spaceemtext-indent: 4em
An em space is the width and height of the capital letter M in the current font size and design.
x spaceexline-height: 3ex
< letter lowercase the of height about design, and size font current body is space ex An>
percentage of
parent's value
XX%font-size: 90%