CSS Unit Sandbox
Preview how common CSS units resolve in a live sample.
Watch CSS units resolve live
px, rem, em, %, vw, vh — each CSS unit resolves against something different, and their real sizes are easy to misjudge. This sandbox applies a value in different units to a live sample so you can see how big each one actually renders in context.
Seeing the units side by side, at your chosen base and viewport, builds intuition that a static conversion table cannot. Experiment with the values, understand how each behaves, and use the one that fits your responsive intent.
Units, previewed
rem resolves against the root font size while em compounds from the parent, which is why nested em values drift. The sandbox renders each live in your browser.
Frequently asked questions
How are the pixel values estimated?
px is used as is, rem and em multiply by the base font size, % uses the parent width you enter, vw uses your current window width, and ch is approximated at 8px.
What is the difference between rem and em?
rem is relative to the root font size, so it is the same everywhere. em is relative to the current element's font size, so it compounds when nested. The sandbox treats both as the base size for a quick estimate.
Why is ch only approximate?
One ch is the width of the "0" character in the current font, so it varies by typeface. It works well for limiting line length, like max-width: 65ch, where precision matters less.
Related tools
Practical utilities for front-end design and implementation work.