CSS Units Explained: PX vs REM vs EM vs VW (With Free Converter Tools)

#css #webdev #frontend #beginners

If you've ever gotten confused about when to use px vs rem vs em in CSS, you're not alone. This is one of the most common sources of confusion for developers at every level.

The Quick Answer

px → Fixed size, doesn't scale. Use for borders, box shadows.
rem → Relative to root font size (16px default). Use for font sizes, spacing.
em → Relative to parent font size. Use with caution, compounds with nesting.
vw/vh → Relative to viewport size. Use for full-screen layouts, fluid typography.

Deep Dive: When Each Unit Makes Sense

PX - Use for Fixed Elements

border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Never use px for font sizes - it overrides user browser font size preferences, breaking accessibility.

REM - Your Default for Most Things

REM is relative to the <html> element font size. Browser default is 16px.

/* 16px → 1rem */
/* 24px → 1.5rem */
/* 14px → 0.875rem */

font-size: 1rem;    /* 16px */
padding: 1.5rem;    /* 24px */
margin-bottom: 2rem; /* 32px */

Pro tip: Set html { font-size: 62.5%; } to make 1rem = 10px so your math is dead simple: 24px = 2.4rem.

EM - For Component-Level Scaling

Use EM when you want the unit to scale with the element's own font size:

/* Button padding scales with button text size */
.btn {
  font-size: 1rem;
  padding: 0.75em 1.5em; /* scales with font-size */
}

.btn-large {
  font-size: 1.25rem;
  /* padding automatically scales up too */
}

VW/VH - For Fluid, Full-Screen Designs

/* Full-screen hero */
.hero {
  width: 100vw;
  height: 100vh;
}

/* Fluid font that scales with screen width */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}