AbsoluteThe 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.
ex. As the "image" on the side shows, the
emis the total font height while the
exis 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).
chunit is currently (June 2012) not supported by webkit browsers.
Viewport relativeCSS3 introduces also viewport relative units: vh, vw and vmin.
1vw = 1% of the width of the initial viewport
1vmin = 1% of the smallest between width and height of viewport
PercentOne 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 UnitsRotation units are used, for instance, in transformations and radial gradients.
Other unitsCSS 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 UnitsFinally, 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)".
<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>
Further readingYou can get some more information about units here: http://www.w3.org/TR/css3-values