CSS Units
CSS has several different units for expressing length.
one些Settings CSS lengthofPropertyYes 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 space between the number and the unit. If the length value is 0, the unit can be omitted.
For some CSS properties, lengths can be negative.
There are two types of length units: relative and absolute.
Browser Support
The numbers in the table below indicate the minimum browser version that supports that length unit.
| Length Units | 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 via the non-standard name vm.
Relative Length
Relative length units specify a length relative to another length property. Relative lengths are more suitable for different devices.
| unit | Description | Online Examples |
|---|---|---|
| em | It describes the font size relative to the current element to which it is applied, so it is also a relative length unit. Generally, the default browser font size is 16px, so 2em == 32px. | Try it Yourself |
| ex | Depends on the height of the lowercase English letter x | Try it Yourself |
| ch | The width of the digit 0 | |
| rem | rem is the abbreviation for root em. When rem acts on a non-root element, it is relative to the root element's font size; when rem acts on the root element's font size, it is relative to its initial font size. | Try it Yourself |
| vw | Viewport Width, viewport width, 1vw = 1% of the viewport width. | Try it Yourself |
| vh | Viewport Height, viewport height, 1vh = 1% of the viewport height. | Try it Yourself |
| vmin | The smaller of vw and vh. | Try it Yourself |
| vmax | The larger of vw and vh. | Try it Yourself |
| % |
 |
Tip:What is the difference between rem and em? The difference is that when using rem to set the font size of an element, it is still a relative size, but it is only relative to the HTML root element. |
|---|
Absolute Length
Absolute length units are fixed values that reflect a real physical size. Absolute length units depend on the output medium and do not depend on the environment (display, resolution, operating system, etc.).
| unit | Description | Online Examples |
|---|---|---|
| cm | centimeter | Try it Yourself |
| mm | millimeter | Try it Yourself |
| in | Inches (1in = 96px = 2.54cm) | Try it Yourself |
| px * | Pixels (1px = 1/96th of 1in) | Try it Yourself |
| pt | point, approximately 1/72 inch; (1pt = 1/72in) | Try it Yourself |
| pc | pica, approximately 12pt, 1/6 inch; (1pc = 12 pt) | Try it Yourself |
Pixels may be considered the best "device pixels," but this pixel length has nothing to do with the screen pixels of the text you see on a display. px is actually a unit measured by angle.
other extensions