mm
The millimeter: a tenth of a centimeter, about 3.78px.
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 1mm = 1/10cm ≈ 3.7795px
How it works
A millimeter is 96/25.4 px, about 3.7795px, which makes it a convenient unit for fine detail on paper. A hairline of 0.25mm is 0.945px, so a stylesheet that wants to match a printed spec can write the number straight from the brief.
Paper sizes are the natural home of mm. An A4 sheet is 210mm by 297mm, so @page { size: 210mm 297mm } describes it without a keyword: Chromium printed it to a PDF page of about 595 by 842 points, the same page as size: A4. The same unit sizes a cutting margin, a bleed, or a column of fixed width on a printed invoice. A length in millimeters stays put when the reader’s default font size changes, which a length in rem does not.
On a display the same arithmetic gives a surprise: 1mm is not a millimeter on your monitor, it is 3.78 CSS pixels, and the screen’s real density does not enter into it. A 5mm button is 18.9 CSS pixels tall, smaller than the 24 by 24 CSS pixel minimum of WCAG 2.2 success criterion 2.5.8, which has exceptions such as targets with enough spacing around them. Size touch targets in rem or px, and keep mm for the printed copy.
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
Fine print dimensions: bleeds, safe zones, label gutters.
Watch out
Millimeters in screen CSS look precise but are not. They turn into fractional pixels: 0.1mm is 0.378px, thinner than one pixel on a 1x display.
.sheet {
padding: 3mm;
}