Skip to content

View Sidebar

CSS Distance Units – Lemuel Cabia

> in other words, try to use relative rather than absolute units in your
> (markup language attribute values or) in your stylesheet property
> values for text size like *percent* instead of pixels (e.g. font-size:
> 75%;). ah yes,..pixel is an example of absolute unit.

Correction lang po. “pixel” is a relative distance (length) unit, not absolute. 🙂 Why? Because, according to W3C’s CSS syntax definition, pixel units are relative to the resolution of the viewing device (e.g. most often a computer display). If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.

This works fine with Mozilla browsers, but not in IE. I don’t know why.

By the way, to summarize, there are two types of length units in CSS, the relative and absolute. “relative” length units are:

  1. em — the current ‘font-size’ of the relevant font
  2. ex — the ‘x-height’ of the relevant font or the height of a small x
  3. px — pixels is relative to the viewing device

The “absolute” length units are only useful when the physical properties of the output medium are known. The absolute units are:

  1. in — inches, 1 inch is equal to 2.54 centimeters
  2. cm — centimeters
  3. mm — millimeters
  4. pt — points, the points used by CSS2 are equal to 1/72th of an inch
  5. pc — picas, 1 pica is equal to 12 points or 1 pica to 6 inches

For more info, please browse: http://www.w3.org/TR/REC-CSS2/syndata.html#length-units