Measurement Units in CSS: CSS has several measurement units to express a length. Most of the CSS properties take “length” values, like width, margin, padding, font-size, etc. A length is a number which is followed by a length unit, such as 15px, 3em, etc. A whitespace can’t be declared between the number and unit. Hence, the value is zero(0), then the unit can be eliminated. For a few CSS properties, negative lengths are applicable.
Types of CSS Measurement Units
There are two types of length units in CSS Measurement Units and those are absolute and relative.
Absolute Lengths
These absolute length units are fixed and the length expressed exactly that size. Absolute length units are not used on-screen, because of the variation of screen sizes. They may be used if the output medium is known as the print layout.
| UNIT | DESCRIPTION |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
NOTE: Pixels (px) are relative to the display device. For low-dpi devices, 1px is one device pixel (dot) of the display. For high-resolution screens and printers, 1px implies multiple device pixels.
Relative Lengths
Relative length units provide a length relative to another length property. The relative length provides the difference between specified mediums
| UNIT | DESCRIPTION |
|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
| ex | Relative to the x-height of the current font (rarely used) |
| ch | Relative to the width of the “0” (zero) |
| rem | Relative to font-size of the root element |
| vw | Relative to 1% of the width of the viewport* |
| vh | Relative to 1% of the height of the viewport* |
| vmin | Relative to 1% of viewport’s* smaller dimension |
| vmax | Relative to 1% of viewport’s* larger dimension |
NOTE: % Relative to the parent element