A length value is expressed as a positive or negative number (when permitted), followed immediately by a unit identifier. There should never be any space between the number and the unit identifier. A length value of 0 (zero) does not require a unit identifier.
Length units are divided into two types: absolute units, which are (in theory) always measured in the same way, and relative units, which are measured in relation to other things.
The available absolute units are:
Centimeters (cm)
The centimeters found on rulers the world over. There are 2.54 centimeters to an inch, and 1 centimeter equals 0.394 inches. The same mapping warnings that applied to inches also apply to centimeters.
Millimeters (mm)
There are 10 millimeters to a centimeter, so you get 25.4 millimeters to an inch, and 1 millimeter equals 0.0394 inches. Bear in mind the previous warnings about mapping lengths to displays.
Quarter-millimeters (q)
Exactly what they say they are: one-fourth of a millimeter. In other words, 4q equals one millimeter, and 400q equals one centimeter. Again, bear in mind the previous mapping warnings.
Inches (in)
As you might expect, the same inches found on typical US rulers. The mapping from inches to a display device is usually approximate at best, because many systems have no concept of the relation of their display areas to “real-world” measurements such as inches. Thus, inches should be used with extreme caution in screen design.
Points (pt)
Points are standard typographical measures used by printers and typesetters for centuries and by word-processing programs for decades. By modern definition, there are 72 points to an inch. Therefore, the capital letters of text set to 12 points should be 1/6 of an inch tall. For example, p {font-size: 18pt;} is equivalent to p {font-size: 0.25in;}, assuming proper mapping of lengths to the display environment (see previous comments).
Picas (pc)
Another typographical term. A pica is equivalent to 12 points, which means there are 6 picas to an inch. The capital letters of text set to 1 pica should be 1/6 of an inch tall. For example, p {font-size: 1.5pc;} would set text to be the same size as the example declarations found in the definition of points. Keep in mind the previous warnings.
The available relative units are:
Em-height (em)
This refers to the em-height of a given font face. In CSS, the em-height is equivalent to the height of the character box for the font face, which is to say the computed value of font-size. Ems can be used to set relative sizes for fonts; for example, font-size: 1.2em is the same as saying font-size: 120%.
Root element em-height (rem)
Equal to the em-height of the root element (in HTML, the html element).
X-height (ex)
This refers to the x-height of the font face, which is to say the height of the lowercase “x” character in the given font face. However, the vast majority of font faces do not include their x-height, so many browsers approximate it (poorly) by simply setting 1ex to be equal to 0.5em.
ZERO width (ch)
This refers to the width of a single zero (Unicode U+0300, “ZERO”) in the current font family and size. This is often, but erroneously, assumed to mean “one character.” This will only be true in monospace fonts, where all characters are the same width. Since most proportional fonts have zeros that are slimmer than the alphabetic symbols, setting something like width: 60ch will often result in lines of text with fewer than 60 characters.
Pixels (px)
A pixel is usually thought of as a small box on a display, but CSS defines pixels more abstractly. In CSS terms, a pixel is defined to be about the size required to yield 96 units per inch. Many user agents ignore this definition in favor of simply addressing the pixels on the display, but others (such as those on high-resolution mobile devices) go the CSS route, treating each px as being multiple physical on-screen pixels.
Viewport width unit (vw)
This unit is calculated with respect to the viewport’s width, which is divided by 100. If the viewport is 937 pixels wide, for example, 1vw is equal to 9.37px. If the viewport’s width changes, say by dragging the browser window to be wider or narrower, the value of vw changes along with it.
Viewport height unit (vh)
This unit is calculated with respect to the viewport’s height, which is divided by 100. If the viewport is 650 pixels tall, for example, 1vh is equal to 6.5px. If the viewport’s height changes, say by dragging the browser window to be taller or shorter, the value of vh changes along with it.
Viewport minimum unit (vmin)
This unit is 1/100 of the viewport’s width or height, whichever is lesser. Thus, given a viewport that is 937 pixels wide by 650 pixels tall, 1vmin is equal to 6.5px.
Viewport maximum unit (vmax)
This unit is 1/100 of the viewport’s width or height, whichever is greater. Thus, given a viewport that is 937 pixels wide by 650 pixels tall, 1vmax is equal to 9.37px.
Got Something To Say: