CSS Units Converter
Convert between CSS units instantly: px, em, rem, %, vw, vh, pt, cm, mm, and in. See all conversions at once with a visual size comparison. Everything runs in your browser.
| Unit | Value | CSS |
|---|
Visual Size Comparison
Frequently Asked Questions
How do I convert px to em in CSS?
To convert px to em, divide the pixel value by the parent element's font size. If the parent font size is 16px (the browser default), then 24px equals 1.5em (24 / 16 = 1.5). The em unit is relative to the font size of the element's parent, so the same em value can represent different pixel sizes depending on context.
What is the difference between em and rem in CSS?
Both em and rem are relative CSS units, but they reference different base sizes. The em unit is relative to the font size of the parent element, which means it compounds when elements are nested. The rem unit (root em) is always relative to the root html element's font size (typically 16px by default). Rem is generally preferred for consistent sizing because it avoids the compounding effect of nested em values.
How do vw and vh CSS units work?
The vw (viewport width) and vh (viewport height) units represent 1% of the browser viewport's width and height respectively. For example, on a 1920px wide viewport, 1vw equals 19.2px and 50vw equals 960px. These units are useful for responsive designs that need to scale proportionally to the browser window size, such as full-screen hero sections or fluid typography.