The format of length values is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation).
There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer). Percentage units (described below) and keyword values (e.g. 'x-large') offer similar advantages.
The following relative units are supported (NOTE : The elements shown are used as an example, the settings can be applied to any element)
H1 { margin: 0.5em } | ems, the height of the element's font |
H1 { margin: 1ex } | x-height, ~ the height of the letter 'x' |
The relative units 'em' and 'ex' are relative to the font size of the element itself. The only exception to this rule in CSS1 is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.
Pixel units, as used in the last rule, are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees.
Child elements inherit the computed value, not the relative value:
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt */
}
H1 { font-size: 15pt }
In the example above, the 'text-indent' value of 'H1' elements will be 36pt, not 45pt.
Absolute length units are only useful when the physical properties of the output medium are known. These absolute units are supported (NOTE : The elements shown are used as an example, the settings can be applied to any element)
H1 { margin: 0.5in } | inches, 1in = 2.54cm |
H2 { line-height: 3cm } | centimeters |
H3 { word-spacing: 4mm } | millimeters |
H4 { font-size: 12pt } | points, 1pt = 1/72 in |
H4 { font-size: 1pc } | picas, 1pc = 12pt |
In cases where the specified length cannot be supported, UAs should try to approximate. For all CSS1 properties, further computations and inheritance should be based on the approximated value.
© 1995-1998, Stephen Le Hunte