CSS has several different units for representing length.
Some properties that set CSS length are width, margin, padding, font-size, border-width, and so on.
Length consists of a number and units such as 10px, 2em, etc.
There can be no spaces between the number and the unit. If the length value is 0, units 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 following table support the minimum browser version for that length unit.
| Length units | |||||
|---|---|---|---|---|---|
| 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 an unsym standard name vm.
Relative length
Relative length units specify a property of one length relative to another length. More suitable for different devices in relative length.
| Unit | Describe | Online instance |
|---|---|---|
| Em | It is described relative to the font size of the current element applied, so it is also a relative length unit. The default font size of the general browser is 16px, then 2em is 32px; | Give it a try |
| ex | Depends on the height of the English child mother x small | Give it a try |
| Ch | The width of the number 0 | |
| Rem | Font-size of the root element (html). | |
| vw | viewpoint width, window width, 1vw - 1% of window width | Give it a try |
| vh | viewpoint height, window height, 1vh - 1% of window height | Give it a try |
| vmin | The smaller one in vw and vh. | Give it a try |
| vmax | The larger one in vw and vh. | Give it a try |
| % |
|
Tip: What's the difference between rem and em? The difference is that using rem to set the font size for an element is still relatively large, but relative to only the HTML root element. |
|---|
Absolute length
The absolute length unit is a fixed value that reflects a true physical size. Absolute length units depend on the output media and do not depend on the environment (monitor, resolution, operating system, etc.).
| Unit | Describe | Online instance |
|---|---|---|
| Cm | Cm | Give it a try |
| Mm | Mm | Give it a try |
| in | inches (1in s 96px s 2.54cm) | Give it a try |
| px * | Pixels (1px s 1/96th of 1in) | Give it a try |
| Pt | point, about 1/72 inches; (1pt s 1/72in) | Give it a try |
| Pc | pica, about 6pt, 1/6 inch; (1pc s 12 pt) | Give it a try |
Pixels may be considered the best "device pixels", and this pixel length has nothing to do with the text screen pixels you see on your display. px is actually a unit measured by angle.