What is the difference between px, rem, and em in CSS?

px is a CSS length unit. rem is relative to the root element font size, while em is relative to the current element's computed font size.

CSS Unit Converter

Q: How do I convert px to rem?

Divide the pixel value by the root font size. With a 16px root, 24px becomes 1.5rem.

Q: What are vw and vh units in CSS?

vw is based on viewport width and vh is based on viewport height. A value of 1vw equals 1% of the viewport width.

Q: When should I use rem vs em vs px?

Use rem for scalable type and spacing, em for component-relative sizing, and px when you need a fixed CSS pixel value such as borders, icons, or exact asset dimensions.

Convert between px, rem, em, vw, vh, %, pt, cm, mm, and in - with your custom base values.

Last reviewed: June 2026

Reviewed by Shannon Patterson, software engineer · last updated June 2026

New to this tool? Click here for instructions

Value

From Unit

Reference Values

Root font size (for rem)

Parent font size (for em)

Viewport width px (for vw)

Viewport height px (for vh)

Container width px (for %)

Screen DPI (for cm/mm/in)

Conversion Results

Unit	Value	Description

Enter a value and unit to see all conversions.

How the CSS Unit Converter works

This converter runs local reference-value math in your browser. Enter a value, choose the source unit, and adjust the root font size, parent font size, viewport size, container width, and DPI assumptions that affect relative or physical-unit conversions. The page does not call an external conversion service.

Standard mode shows the broad set of screen units, Responsive mode focuses on layout units, and Print mode narrows the table to pixel, point, inch, centimeter, and millimeter conversions. The highlighted row is the unit you started from; each Copy button copies that row's formatted value.

Conversion notes

rem: calculated from the root font size field, often 16px by default but not guaranteed in every project.
em: calculated from the parent/current font size field, so nested components may need their own context.
vw and vh: calculated from the viewport width and height fields as 1% of those dimensions.
%: this tool treats percentages as relative to the container width field, which is useful for width/layout planning but not every CSS property resolves percentages against width.
Physical units: screen conversions use the DPI field as an estimate. Print CSS and device scaling can produce different physical results.

Sources

Frequently Asked Questions

px is a CSS length unit. rem is relative to the root element's font size, while em is relative to the current element's computed font size.

Divide the pixel value by the root font size. With a 16px root, 24px becomes 1.5rem.

vw is based on viewport width and vh is based on viewport height. A value of 1vw equals 1% of the viewport width.

Use rem for scalable type and spacing, em for component-relative sizing, and px when you need a fixed CSS pixel value such as borders, icons, or exact asset dimensions.

They are best treated as estimates on screens because CSS pixels, device pixels, browser zoom, and DPI assumptions can differ. They are most useful for print-oriented planning.

Example walk-through

Worked example: matching a design token

If a design file specifies a 24px spacing token and your app uses a 16px root font size, enter 24, choose px, and keep Root font size at 16. The table returns 1.5rem, which is a useful token value for scalable spacing.

/* Input assumptions */
value: 24px
root font size: 16px

/* Useful output */
space-6: 1.5rem;

For a card width planned as a percentage, set Container width to the layout's real content width first. A 300px card inside a 1200px container converts to 25%; the same card inside a 960px container converts to 31.25%.