Absolute units have fixed ratios to one another, and CSS anchors them all to the pixel: 1in is defined as exactly 96px, so 3in, 7.62cm, 288px and 216pt are the same length.
| Unit | Name | Equals |
|---|---|---|
| px | CSS pixel | 1/96 in |
| cm / mm / Q | centimeter / millimeter / quarter-millimeter | 37.8px / 3.78px / 0.945px |
| in | inch | 2.54cm = 96px |
| pt / pc | point / pica | 1/72 in / 12pt (1/6 in) |
A CSS pixel is not a device pixel: at a device pixel ratio of 3, one CSS pixel covers 3x3 hardware pixels, and a "3-inch" bar on a monitor rarely measures three inches. Use px or relative units for screens and keep cm, mm, in and pt for print, where @page { margin: 2cm; } really measures two centimeters.