CSS Units
CSS Units are a system of measurement used to style webpages and applications. They are used to define the size, position, and other properties of elements on the page.
CSS units are used to specify the size of elements, such as font size, width, height, margins, padding, etc. The most common CSS units are pixels (px), em, rem, percent (%), and viewport units (vw, vh, vmin, vmax). Pixels (px) are fixed-size units that are used for screen resolutions, while em/rem are relative units that are based on the font size of the parent element. Percent (%) is a unit that is relative to the parent element’s size, while viewport units (vw, vh, vmin, vmax) are based on the size of the browser window.
CSS Units are divided into two categories: absolute units and relative units. Absolute units are fixed values, such as pixels, inches, and millimeters. Relative units are relative to the size of the viewport, such as percentages and viewport units.
Absolute Lengths
The following are all absolute length units, they are not relative to anything else and are generally considered to always be the same size.
| Unit | Name |
| cm | Centimeters 1cm = 96px/2.54 |
| mm | Millimeters 1mm = 1/10th of 1cm |
| Q | Quarter-millimeters 1Q = 1/40th of 1cm |
| px | Pixels 1px = 1/96th of 1in |
| pc | Picas 1pc = 1/6th of 1in |
| pt | Points 1pt = 1/72th of 1in |
| in | Inches 1in = 2.54cm = 96px |
Relative Lengths
Relative units are useful for styling responsive sites because they scale relative to the parent or window size (depending on the unit).
| Unit | Relative to |
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
| ex | x-height of the element’s font. |
| ch | The advance measure (width) of the glyph “0” of the element’s font. |
| rem | The font size of the root element. |
| lh | The line height of the element. |
| vw | 1% of the viewport’s width. |
| vh | 1% of the viewport’s height. |
| vmin | 1% of the viewport’s smaller dimension. |
| vmax | 1% of the viewport’s larger dimension. |
| % | Relative to the parent element |
Browser Support
| Length Unit |  |  |  |  |  |
| 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 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |