CSS Unit Reference
CSS Units.
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
Note: A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.
For some CSS properties, negative lengths are allowed.
There are two types of length units: absolute and relative
Absolute Lenghts
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.
| Unit | Description |
|---|---|
| cm | centimetersTry it |
| mm | millimetersTry 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) |
* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.
| 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 |
| % | Relative to the parent element |
Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
Browser Support
The numbers in the table specify the first browser version that fully supports the length unit.
| Length Unit | Google Chrome | Microsoft Edge | Mozilla Firefox | Safari | Opera Mini |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1 | 3 | 1 | 1 | 3.5 |
| ch | 27 | 9 | 1 | 7 | 20 |
| rem | 4 | 9 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20 | 9 | 19 | 6 | 20 |
| vmin | 20 | 12 | 19 | 6 | 20 |
| vmax | 26 | 16 | 19 | 7 | 20 |
DevCrib is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using DevCrib, you agree to have read and accepted our terms of use, cookie and privacy policy.
Copyright 2022 by Michael Okwuosah. All Rights Reserved.
