Now I'd like to talk for a minute about the different
CSS Length Units. As you know, CSS supports many
different ways of measuring the length of an element. Some are
absolute length units (such as inches, centimeters, or points) and
others are relative length units (such as pixels and em units). The table
below shows all of the different length units available in CSS and
what each one means.
| Unit |
Unit Type |
Description |
Example |
| % |
Relative |
Percentage (relative to another value) |
p { font-size: 85%; } |
| em |
Relative |
One em unit is equal to the font-size of a given font |
p { font-size: 1.5em; } |
| ex |
Relative |
x-height (height of the lowercase letter x) |
p { font-size: 2ex; } |
| px |
Relative |
Pixels |
p { font-size: 13px; } |
| in |
Absolute |
Inches |
p { font-size: 0.15in; } |
| cm |
Absolute |
Centimeters |
p { font-size: 1cm; } |
| mm |
Absolute |
Millimeters |
p { font-size: 4mm; } |
| pc |
Absolute |
Picas (1 pica = 12 points, 1 inch = 6 picas) |
p { font-size: 1pc; } |
| pt |
Absolute |
Points (1 point = 1/72 inches) |
p { font-size: 12pt; } |