CSS defines a lot of units for different type of measures. Here a few examples and some explanations. The interactive parts should work on Firefox and webkit (where applicable), did not test on IE and Opera.

Length units

Absolute

The main absolute length (size) unit, when working for the screen, is the pixel (px).

CSS defines also some other absolute length units. These are more useful for print, but can be used also on a display (discouraged). The discouraging holds also the other way around: px should be used with care when printing.

pt: 3/4
mm: 25.4/96
pc: 1/16
cm: 2.54/96
in: 1/96

1px

px: 4/3
mm: 25.4/72
pc: 1/12
cm: 2.54/72
in: 1/72

1pt

px: 96/25.4
pt: 72/25.4
pc: 6/25.4
cm: 0.1
in: 10/2.54

1mm

px: 16
pt: 12
mm: 25.4/6
cm: 2.54/6
in: 1/6

1pc

px: 96/2.54
pt: 72/2.54
mm: 10
pc: 6/2.54
in: 1/2.54

1cm

px: 72
pt: 96
mm: 25.4
pc: 6
cm: 2.54

1in

Font Relative

0.
x

1ex

1em

1ch

All major browsers support at least two font relative units: em and ex. As the "image" on the side shows, the em is the total font height while the ex is usually the height of the x character (one exception is when the font doesn't have the letter x). The font that is used for this sizes is the one applied to the tag (therefore the inherited one if none is explicitly specified).

Another font relative measure of units is the rem. The rem (root em) is the same as the normal em but related to the root element.

And there is also ch. This last font related unit is the advancement of the character '0' (zero) of the current font. In fonts that are not monospaced the advancement of a character depends of the character (see below).

00000mmmm

The ch unit is currently (June 2012) not supported by webkit browsers.

Viewport relative

CSS3 introduces also viewport relative units: vh, vw and vmin.

1vh = 1% of the height of the initial viewport
1vw = 1% of the width of the initial viewport
1vmin = 1% of the smallest between width and height of viewport

Percent

One more unit is the percent. Percents are relative to something. In the case of fonts they are related to the parent. For lengths (for instance: width and top), the percent, is related to the size of the first positioned element, or when none, to the size of the whole document.

Rotation Units

Rotation units are used, for instance, in transformations and radial gradients.

1turn

1rad

10deg

10grad

1 turn equals

2π rad

360 deg

400 grad

1 rad equals

1/2π turns

180/π deg

200/π grad

1 deg equals

1/360 turns

π/180 rad

9/10 grad

1 grad equals

1/400 turns

π/200 rad

10/9 deg

Move the mouse over the units on the left

Other units

CSS defines also units for pixel density, time (s, ms), frequencies (hz, khz), color, etc. I will not cover them here since quite trivial (time and frequencies) or enough complex to deserve a separate post (color, densities).

Mixing Units

Finally, there is another very nice feature that plays a role here. Let's assume we are using an element that has width of 50% wide and has a border of 10px. What if we want to place beneath it another element with same width but no border. Setting a width of 50% would make it 20px to narrow (2 borders of 10px) and the actual width depends on the size of the container. Fortunately CSS3 can perform computation. We can set the width of the second element to "calc(50% + 20px)".

width:50%; + 2x 10px border

width:50%

width: calc(50% + 20px)

The source code (without background colors) for the example above is

<div style="width:50%; border:10px solid">width:50%; + 2x 10px border</div>

<div style="width:50%;">width:50%</div>

<div style="width:-moz-calc(50% + 20px); width:-webkit-calc(50% + 20px); width:calc(50% + 20px);">width: calc(50% + 20px)</div>

Jun 19, 2012

CSS Units