Five absolute units, one size
All five boxes line up. getComputedStyle shows the size the browser really used, always in px.
A CSS pixel (px) is an agreed reference size, not one dot on your screen; the browser maps it to real device pixels using the device pixel ratio, and every other absolute unit (in, cm, mm, pt, pc) is a fixed number of CSS pixels.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write CSS for a .stamp box that is exactly 2in wide and 1in tall, with a 2pt solid border. What are its sizes in pixels?
Write a print stylesheet that sets the body text to 12pt, page margins to 1.5cm, and hides any element with class no-print.
Explain it without notes
What is a CSS pixel, and how is it different from a device pixel?
What does the device pixel ratio tell you, and what changes it?
Why are cm and in unreliable on screens but fine in print?
When is px the right unit, and when should you avoid it?
Preview
Console
Nothing logged yet.Expected console output
96px = 96px
1in = 96px
2.54cm = 96px
72pt = 96px
6pc = 96px