What is the difference between em and rem?

rem is always relative to the root (html) font-size, so it stays predictable across the document. em is relative to the element's own font-size, or to the parent's font-size when used on the font-size property itself, which means ems can compound through nested elements.

What are dvh, svh and lvh units?

They are dynamic, small and large viewport-height units for mobile. svh measures the viewport when browser toolbars are visible, lvh when they are hidden, and dvh updates live as the bars show or hide. They solve the long-standing problem of 100vh overflowing on mobile.

How does the px to rem conversion work?

rem equals the px length divided by the root font-size. With the common 16px root, 24px is 1.5rem. The converter lets you set the root and element font-sizes so the rem and em results match your actual stylesheet rather than assuming 16px.

When can I use container query units like cqw?

Container units resolve against the nearest ancestor that declares container-type (size or inline-size) via the container shorthand. Without such an ancestor they have no defined container and fall back to the small viewport. They let a component size itself to its container rather than the viewport.

Are absolute units like cm accurate on screen?

Not physically. On screens CSS anchors 1in to 96px and derives cm, mm, pt and pc from that, so they are consistent with px but rarely match a real ruler. Absolute units are reliable for print stylesheets, where they map to true physical sizes.

What is the CSS Units Reference?

Searchable CSS units reference covering absolute, font-relative, viewport, container, angle, time and resolution units, with a live px to rem, em, pt and viewport-percentage converter. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Units Reference — Gera Tools

Name: CSS Units Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

CSS keeps adding units — viewport, container, and the small/large/dynamic viewport variants — and the relative ones depend on context that is easy to get wrong. This reference lists every common unit with its basis and includes a live converter for the length units you switch between most.

How it works

The converter takes a px length plus the values that the relative units depend on: the root font-size for rem, the element font-size for em, and the viewport size for vw and vh. It divides accordingly and also derives the print units using CSS’s fixed anchor of 1in = 96px (so 1pt = 96/72 px and 1cm = 96/2.54 px). The reference table tags each unit by type and explains its basis; the search box matches the unit, type, description, and basis.

Unit categories explained

Absolute units

Absolute units (px, pt, in, cm, mm, pc) do not change with context. On screens, CSS anchors 1in to exactly 96px and derives the rest from there — so 1pt = 1.333px, 1cm = 37.8px. This means they match a physical ruler only in print; on screen they are just predictable fractions of a pixel grid. The main use case for absolute units is print stylesheets where physical dimensions genuinely matter.

Font-relative units

rem and em are the workhorses of scalable design:

Unit	Resolves against
`rem`	The root `html` font-size (usually 16px by default)
`em`	The element’s own `font-size`; on the `font-size` property itself, the parent’s value
`ch`	The width of the `0` glyph in the current font
`ex`	The x-height of the current font
`lh`	The computed `line-height` of the element

The key difference: em values compound through nesting. A paragraph inside a 0.8em-sized section inside another 0.8em section renders at 0.64em of the root — which can produce surprising results. rem always refers back to the root, so it never compounds.

Viewport units and the mobile address-bar problem

The original vw and vh measure the layout viewport — the full browser window including any toolbars. On mobile, this means 100vh is taller than the visible area when the address bar is showing, causing the classic bottom-of-screen overflow. The solution is the three-tier system introduced in 2022:

svh / svw — small viewport: measured with toolbars visible (the shortest safe area)
lvh / lvw — large viewport: measured with toolbars hidden (the maximum size)
dvh / dvw — dynamic viewport: updates live as toolbars show and hide

Use dvh for elements that must genuinely fill the visible screen at all times, svh for a safe minimum, and avoid bare vh for full-height mobile layouts.

Container query units

Container units resolve against the nearest containment context — an ancestor that declares container-type: size or container-type: inline-size. Without one, they behave like small viewport units.

Unit	Resolves against
`cqw`	Container width
`cqh`	Container height
`cqi`	Container inline size (width in horizontal writing modes)
`cqb`	Container block size
`cqmin` / `cqmax`	Smaller / larger of `cqi` and `cqb`

These are most useful for reusable components that should size themselves to their container rather than the viewport — carousels, card grids, and sidebars that exist in multiple layout contexts.

Practical conversion example

With a 16px root font-size and a 1440px viewport:

Value	rem	em (at 16px)	vw	pt
16px	1rem	1em	1.11vw	12pt
24px	1.5rem	1.5em	1.67vw	18pt
48px	3rem	3em	3.33vw	36pt

Tips and notes

Prefer rem for type and spacing so a single root font-size scales the whole UI; reach for em when you want a value to track the local font-size.
Use dvh (or svh/lvh) instead of vh for full-height mobile layouts to avoid the address-bar overflow problem.
Container units (cqw, cqi, …) only resolve inside an element with a declared container-type; otherwise they fall back to viewport sizing.
Absolute units are consistent with px on screen but only physically accurate in print.

The relative conversions above are exact given the basis values you enter; change the root or viewport fields to match your own stylesheet.