Spcecifying Lengths in CSS - Length Values

A length value consists of a real number followed by a unit. Some properties accept only positive numbers. There should be no whitespace between the real number and the unit. If the real number is zero then a unit need not be entered. Lengths can be absolute or relative.

Absolute Length Units

There are five absolute units in CSS:

• millimeters (mm)
• centimeters (cm)
• inches (in)
• points (pt) - one point is 1/72 of an inch
• picas (pc) - one pica is equal to 12 points, therefore 1/6 of an inch is one pica

The problem with absolute length units is that the number of pixels per inch on monitors are not fixed. The number of pixels per inch on a laptop screen is usually higher than on desktop monitors. To complicate things further, these settings can be customized by the user. For the purpose of displaying font sizes, Windows and Mac computers assume that there are 96 pixels per inch on the monitor. Therefore, if a font's size is specified as 72 points (1 inch), then the operating system converts that to a height of 96 pixels. However, rarely are 96 pixels equal to 1 inch on a computer monitor. The actual length of 96 pixels varies a lot depending on the kind of monitor and the resolution that the user has set it to.
It is for the above reason that on a windows or mac computer specifying size in anything other than pixels is inaccurate.
However, absolute length units are useful in print style sheets. Printers usually reproduce absolute lengths correctly.
Example: height: 10cm;

Relative Length Units

Relative Length Units are those that are specified relative to the another quantity. There are three relative length units in CSS:

• em - 1em is the current font size (default or inherited)
• ex - 1ex is the x-height of the current font
• px - pixels

em units

In CSS, one em is defined as equal to the current font size. The "current" font size may be inherited, may be the browser default or may be specified using the font-size property. em units can be used to specify font-sizes, margins, borders, widths, heights etc.
Example: If the inherited font size of the p element is 12 pixels and if the left-margin is specified as 2em (margin-left: 2em), then the left-margin will be equal to 24 pixels.

ex units

One ex unit is the height of a lowercase x in the current font. Therefore the ex height will vary with different fonts (Times, Verdana etc) of the same size. The ex height is defined even for those fonts that don't have a lowercase in them - the ex height is specified in the font file itself. In practice, however, most fonts do not specify their ex height.
Internet Explorer 6, Internet Explorer 7 and Opera 9.6 simply consider 1ex to be equal to 0.5em

Pixel Lengths

Even though pixels appear to be absolute units, in CSS they are defined as relative units because on high-resolution output devices such as printers, CSS pixel units are scaled. On such devices, one pixel is considered to be 1/96 inch. However on computer monitors, one CSS pixel unit is equal to one pixel on the display screen.
Font sizes specified in pixels cannot be resized by the user in IE6
Example:
padding: 5px 5px;