A revolving globe (90 x 90) Right portion of Beaverland Tech-Forum Title
 
































Click the picture below for more books on CSS
(A new window will show up.)

cssanim.gif:Css animated banner(180x135) In Association with Amazon.com
In Association with Amazon.com

Click here for your favorite eBay items

 
Units Used in CSS
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.

 




Rate article:
Excellent Good Neutral Poor Worst

Your Name:
Your Email Address:
Comments:


  Comments
  Be the first to comment this article!
    -
   
 
Akira KatoCopyright Akira Kato
About this author: - Educated both in Canada and Japan - Traveled extensively in Europe, Far East, and North America - Worked as management consultant, computer systems analyst, college instructor and freelance writer.



womenhis.gif (180x135) Famous
women in the recent past
Famous Women in History
theater.gif (470x89) Theater Interior
inserted by FC2 system