CSS Units
CSS has several different units for expressing length.
Some properties that set CSS length include width, margin, padding, font-size, border-width, etc.
A length consists of a number and a unit, such as 10px, 2em, etc.
There must be no spaces between the number and the unit. If the length value is 0, the unit can be omitted.
For some CSS properties, the length can be negative.
There are two types of length units: relative and absolute.
Browser Support
The numbers in the table indicate the minimum browser version that supports the length unit.
| Length Unit | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Not supported | 19.0 | Not supported | 20.0 |
Note: Internet Explorer 9 supports vmin with a non-standard name vm.
Relative Lengths
Relative length units specify a length relative to another length property. Relative lengths are more suitable for different devices.
| Unit | Description | Example |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | Try it |
| ex | Relative to the x-height of the current font (rarely used) | Try it |
| ch | Relative to the width of the "0" (zero) | |
| rem | Relative to the font-size of the root element | Try it |
| vw | Relative to 1% of the width of the viewport | Try it |
| vh | Relative to 1% of the height of the viewport | Try it |
| vmin | Relative to 1% of viewport's smaller dimension | Try it |
| vmax | Relative to 1% of viewport's larger dimension | Try it |
| % |
| | Tip: What is the difference between rem and em? The difference is that rem is relative to the root element's font-size. | | --- | --- |
Absolute Lengths
Absolute length units are fixed values and reflect a real physical size. Absolute length units are device-dependent and do not rely on the environment (monitor, resolution, operating system, etc.).
| Unit | Description | Example |
|---|---|---|
| cm | Centimeters | Try it |
| mm | Millimeters | Try it |
| in | Inches (1in = 96px = 2.54cm) | Try it |
| px * | Pixels (1px = 1/96th of 1in) | Try it |
| pt | Points (1pt = 1/72 of 1in) | Try it |
| pc | Picas (1pc = 12 pt) | Try it |
Pixels might be considered the best "device pixel," and this pixel length is unrelated to the font size pixels you see on the screen. The px unit is actually a measure of angle.