CSS Unit Converter
Convert between px, rem, em, vw, vh, pt, cm, mm, %, and fr units.
| Unit | Value | Copy |
|---|---|---|
| px | 16 | |
| rem | 1 | |
| em | 1 | |
| vw | 1.11111 | |
| vh | 1.77778 | |
| pt | 12.0003 | |
| cm | 0.423333 | |
| mm | 4.23333 | |
| % | 100 | |
| fr | — |
Frequently Asked Questions
What is the difference between px, rem, and em in CSS?
px is an absolute pixel unit. rem (root em) is relative to the root font size (html element, typically 16px by default). em is relative to the font size of the current element's parent. rem is generally preferred for scalable, accessible layouts.
How do I convert px to rem in CSS?
Divide the pixel value by the root font size. With the default 16px root size: 16px ÷ 16 = 1rem, 24px ÷ 16 = 1.5rem, 32px ÷ 16 = 2rem. If you change the html font-size to 10px, then 1rem = 10px, making conversions easier (e.g. 16px = 1.6rem).
How does Tailwind CSS use rem for spacing?
Tailwind CSS uses rem units for all spacing, font size, and sizing utilities. The base is 1 unit = 0.25rem = 4px (with 16px root). So p-4 = 1rem = 16px, p-8 = 2rem = 32px. This ensures consistent scaling when users change their browser font size.
What are vw and vh units?
vw (viewport width) and vh (viewport height) are percentages of the browser's viewport. 100vw is the full viewport width, 50vh is half the viewport height. They are commonly used for full-screen layouts, hero sections, and responsive font sizes (fluid typography).
When should I use rem vs em in responsive design?
Use rem for global spacing, font sizes, and layout — it stays consistent regardless of nesting. Use em when you want an element to scale relative to its parent's font size, which is useful for padding/margin inside reusable components.