cm
The centimeter: 1/2.54 of an inch, about 37.8px.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 1+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 1+ |
| Firefox Android | 4+ |
| Safari | 1+ |
| Safari iOS | 1+ |
Formula 1cm = 96px / 2.54 ≈ 37.795px
How it works
A centimeter is 96/2.54 px, which is 37.795…px: the number does not round to a whole pixel, so a width of 10cm is 377.95px. That fractional result is the reason centimeters are a poor fit for anything pixel-aligned on a screen, such as borders and icon boxes, and a good fit for what is meant to be measured on paper.
Because the definition goes through the inch, 1cm is also 10mm, 40Q and about 28.35pt. These ratios are fixed by the specification, so a stylesheet written in centimeters can be converted by hand.
Use cm in print styles when the brief is written in centimeters: a 2.5cm page margin, a label sheet with fixed cell sizes, a poster. Printed to PDF from Chromium, a box 10cm wide measured about 283.5 points, which is 10cm of paper. On screen a centimeter is 37.8 CSS pixels, so choose a relative unit instead. A slip to avoid is holding a ruler to the screen to decide on a value: the ruler measures hardware, and cm measures the model.
Try it
Convert between the absolute units
Type a length in one unit and read it in all seven. Every absolute unit is a fixed number of CSS pixels, so the conversion needs no screen.
px- 96
pt- 72
pc- 6
in- 1
cm- 2.54
mm- 25.4
Q- 101.6
The same as a table
| Unit | CSS pixels in 1 of it |
|---|---|
1px | 1px |
1pt | 1.3333px |
1pc | 16px |
1in | 96px |
1cm | 37.795px |
1mm | 3.7795px |
1Q | 0.94488px |
What changes it
- Moves with
- page zoom
- Stays put under
- the reader's text size
- the window size
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
Print styles written in metric: A4 margins, label sheets, posters.
Watch out
A CSS centimeter is a ratio, not a measurement. A 5cm box on a phone is not five centimeters wide to the eye. Check physical sizes in print preview or a PDF, never on the screen.
.label {
inline-size: 5cm;
block-size: 3cm;
}