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 degrees. 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.
There is one very subtle point regarding the use of em units that must be appreciated
- A specification such as
width:10emindicates a size relative to the em-size of the current element.
- However the specification
font-size:0.8emimplies 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:0; are both correct.