CSS Units of Measurement

Absolute and Relative Units

Absolute units: px (pixels), pt (points), cm, mm, in.

Relative units: em (relative to font-size), rem (relative to root font-size).

Percentage (%) is relative to parent element.

Viewport units: vw (viewport width), vh (viewport height), vmin, vmax.

rem is preferred for consistent scaling.

/* Pixels (absolute) */
.pixels {
  font-size: 16px;
  width: 300px;
}

/* Em (relative to parent font-size) */
.em-units {
  font-size: 1.5em; /* 1.5 times parent */
}

/* Rem (relative to root font-size) */
.rem-units {
  font-size: 1.5rem; /* 1.5 times root */
  padding: 2rem;
}

/* Percentage */
.percentage {
  width: 50%; /* 50% of parent width */
}

/* Viewport units */
.fullscreen {
  width: 100vw;
  height: 100vh;
}