in
The inch: 96px, 2.54cm, 72pt.
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 1in = 96px = 2.54cm = 72pt = 6pc
How it works
The inch is the hub of the absolute family. In CSS, 1in is exactly 96px, 2.54cm, 72pt and 6pc, and the other absolute units are fixed ratios of it: the specification writes the centimeter as 96px/2.54, the millimeter and the quarter-millimeter as fractions of the centimeter. The ratios are written into the specification and Chromium reproduces them. They do not depend on the screen, so a display with another pixel density gets the same 96 CSS pixels for 1in, drawn at another physical size.
That is the thing to remember when you reach for in on a page meant for screens. The inch is a measure from the print model, and on a display it is a count of 96 CSS pixels. How long that is in real inches depends on the density of the display, the scaling of the operating system and the zoom of the page, and only the CSS pixel count is held constant.
Paper is where in means what it says. In a PDF printed from Chromium, @page { size: 8.5in 11in } produced a page of 612 by 792 points, which is US Letter, and margin: 0.5in left a printable area of 7.5in by 10in inside it. Separately, in is also an ordinary English word, so a text search for it in a stylesheet finds many unrelated matches.
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
@page margins and the other print sizes that the rest of the sheet is derived from.
Watch out
Nothing on screen is measured with a ruler. The browser does not know how large the display really is, so 1in always draws as 96 CSS px. Only paper output makes the unit physical.
Before
.ruler {
inline-size: 3in;
}After
@page {
margin: 0.75in;
}