Updated: 2026-07-11
🔢 CSS Unit Converter
⚙️ Base Settings
px (Browser default is 16px)
px
px
px (used for em unit calculation)
📊 Conversion Result
Enter a value and click Convert.
📋 Common CSS Unit Reference Table
| Unit | Type | Relative To | Common Uses |
|---|---|---|---|
| px | Absolute | 1px = 1 screen pixel | Borders, shadows, exact sizes |
| rem | Relative | Root element font size | Font sizes, spacing |
| em | Relative | Current element font size | Component padding, buttons |
| vw | Viewport | 1% of viewport width | Full layouts, responsive fonts |
| vh | Viewport | 1% of viewport height | Full height, page-side blocks |
| % | Relative | Parent element's property | Width, height, positioning |
| pt | Absolute | 1pt = 1/72 inch | Print styles |
| cm | Absolute | Physical unit | Print styles |
| in | Absolute | Physical unit | Print styles |
| ex | Relative | Current font x-height | Alignment, typography |
| ch | Relative | Width of the "0" character | Monospace layouts, character counting |
❓ Frequently Asked Questions
❓ What is the difference between px, rem, and em?
px (pixels) is absolute — 1px equals one screen pixel. rem is relative to the root element's font size (usually 1rem = 16px browser default). em is relative to the current element's font size. em can cascade unpredictably in nested elements.
❓ When should I use rem vs em?
Use rem for font sizes and spacing as it only depends on root font size. Use em for component-scale elements like button padding. Use px for borders, shadows, and fine details. Use vw/vh for full-screen layouts and responsive designs.
❓ How are vw and vh calculated?
1vw = 1% of viewport width. 1vh = 1% of viewport height. For a 1200px viewport, 10vw = 120px. Note: mobile browsers may include address bar in 100vh — use dvh (dynamic viewport height) as alternative.
❓ What is the browser default font size?
Most browsers default to 16px (configurable in settings). This equals 1rem by default. Using rem units respects user font size preferences for better accessibility.
❓ When to use pt, cm, mm in CSS?
pt (points, 1pt = 1/72 inch) is for print stylesheets. cm, mm, in are physical units mainly for @media print queries. On screens, actual sizes depend on screen DPI/PPI.