Units of Measurement in CSS

In theory CSS understands linear dimensions specified in a variety of different ways. Broadly speaking, there are two categories of units, absolute and relative. We describe the various options each each category below

• Inch (in), Centimeter (cm) & Millimeter (mm): It goes without saying that these are absolute units of measurement. 1cm = 0.393701in and 1in = 2.54cm. Computer displays do a very poor job of rendering such physical units so they are of limited use.
• Point (pt): Another absolute unit, in many ways a relic from the days of traditional typesetting. There are 72 points to an inch.
• Pica (pc): Once more, an absolute unit. There ae 12 points per pica or 6 picas per inch.
• em-height (em): This is a relative unit of measurement. An em is the height of the character box for a given font.
• x-height (ex): Similar to em-height in principle but based instead on the height of the character x in the given font. Of limited use in practice since x-height information is not readily available.
• Pixel (px): While em-height and x-height are both relative to the font pixels are relative to the device, usually the screen, on which the web page is to be rendered. W3C defines the relative pixel as the visual angle subtended by one pixel on a device with a density of 96 pixels per inch when at arm's length (28 inches). In practice this works out to be an angle of 0.0213�. Not surprisingly, browsers ignore this, well intentioned, definition and simply address screen pixels instead.
• Percentage (%):Percentages too are a relative unit of measurement. Font-sizes are relative to the the font-size for the parent element while height and width when expressed as a percentage are relative to the height or width of the parent element. Heights and widths expressed as % can be useful at times.

The most extensively used unit in your site design should be em followed by percent, %. In a complex layout made up of a number of positioned divs it may be necessary to size one residual div in other units, such as pixels, and then to resize it at display time using JavaScript. Should the use of em units prove to be impractical consider using percentage units instead.

There is one very subtle point regarding the use of em units that must be appreciated

• A specification such as width:10em indicates a size relative to the em-size of the current element.
• However the specification font-size:0.8em implies a font-size that is 0.8 times the em size of the parent element.

Failing to understand this issue can lead to apparently incorrect page layouts such as this one.

A final note: When specifying sizes in CSS the unit of measurement should immediately follow the number. Thus width:5em; is correct but width:5 em; is not. The only time when it is not necessary to specify the unit of measurement is when the number is a zero. Thus padding:0em; and padding:0; are both correct.