Measurement Units

Many of the CSS properties require some sort of size specification. font-size, for example, lets you specify the font size, and margin lets you specify a margin size. There are a number of different measurement units that you can use in these properties.

When you code a value and a unit, you must not place a space between them. 12px is valid, but 12 px is not. Netscape 4 is very unforgiving about this!

Some units such as inches are absolute units. Others such as ems are relative units — they specify a value that is based on some other measurement. In general, it's better to use relative units where possible.

Absolute Units

The absolute units are:

in   Inches (one inch = 2.54 centimeters)
cm   Centimeters
mm   Millimeters
pt   Points (one point = 1/72 inch)
pc   Picas (one pica = 12 points = 1/6 inch)

In practice, your browser cannot actually produce an accurate measurement in any of these units. The browser may know what screen resolution (640x480, 800x600, etc.) you're using, but it doesn't know how large your monitor is! If you specify a 1-inch margin and your resolution is set at 800x600, it will try to compute one inch as best it can. But there will be a big variation between how this appears on a 14" monitor as compared to a 21" monitor.

Relative Units

The relative units are:

em   The height of the element's font
ex   The height of the letter x in the element's font
px   Pixels (relative to resolution)

Percentage Units

A percentage unit is written with a % sign right after the number: 75%, for example. The percentage usually refers to the current font height, so you could increase the font size a bit with font-size: 105%; or decrease it a bit with font-size: 95%;. In a few properties, the percentage refers to a percentage of something other than the font size.