by Akira Kato
June 6, 2001
You Have To Know the Units Used in CSS. |
In Cascading Style Sheets, lengths refer to horizontal or vertical measurements. The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by
one of the unit identifiers—described below—such as px, in and pt. After the '0' length, the unit identifier is optional.
Some properties allow negative length values, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be converted to the nearest value that can be supported.
There are two types of length units: relative and absolute. |
Relative Units
Relative length 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).
Relative units are:
UNIT |
DESCRIPTION |
em |
the 'font-size' of the relevant font
eg. H1 { margin: 0.5em } |
ex |
the 'x-height' of the relevant font
eg. H1 { margin: 1ex } |
px |
pixels, relative to the viewing device
eg. P { font-size: 12px } |
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)
Examples:
H1 { line-height: 1.2em }
means that the line height of H1 elements will be 20% greater than the font size of the H1 elements. On the other hand:
H1 { font-size: 1.2em }
means that the font-size of H1 elements will be 20% greater than the font size inherited by H1 elements.
The 'ex' unit is defined by the font's 'x-height'. The x-height is so called because it is often equal to the height of the lowercase "x". However, an 'ex' is defined even for fonts that don't contain an "x".
When specified for the root of the document tree (e.g., "HTML" in HTML), 'em' and 'ex' refer to the property's initial value.
The 'px' unit is relative to the resolution of the viewing device, 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, your
browser should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 90 dpi (dots per inch) and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0227 degrees.
For reading at arm's length, 1px thus corresponds to about 0.28 mm (1/90 inch). When printed on a laser printer, meant for reading at a little less than arm's length (55 cm, 21 inches), 1px is about 0.21 mm. On a 300 dots-per-inch (dpi) printer, that may be rounded up to 3 dots (0.25 mm); on a 600 dpi printer, it can be rounded to 5 dots.
If a reading distance is 71 cm (28 inch), one pixel (px) is equal to
0.28 mm while a reading distance of 3.5 m (12 feet) requires a px of 1.4 mm.
Child elements do not inherit the relative values specified for their parent; they (generally) inherit the computed values. |
Example:
In the following rules, the computed 'text-indent' value of H1 elements will be 36pt, not 45pt, if H1 is a child of the BODY element.
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e., 36pt */
}
H1 { font-size: 15pt }
|
NOTE: If you want to know about inheritance,
please read the article: Inheritance of Styles.
Absolute Units
Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:
UNIT |
DESCRIPTION |
in |
inches—1 inch is equal to 2.54 centimeters.
eg. H1 { margin: 0.5in } |
cm |
centimeters
eg. H2 { line-height: 3cm } |
mm |
millimeters
eg. H3 { word-spacing: 4mm } |
pt |
points -- the points used by CSS2 are equal to 1/72th of an inch.
eg. H4 { font-size: 12pt } |
pc |
picas -- 1 pica is equal to 12 points.
eg. H4 { font-size: 1pc } |
In cases where the specified length cannot be supported, your browser must approximate it in the actual value.