Skip to main content

Difference between px, rem, em units

There are two types of units in CSS:

  • Absolute units: px
  • Relative units: em, rem, %, vh

Absolute units don't change, while relative units are flexible and change based on context.

Let's dive into the most popular of them: px, em, and rem.

Pixels (px)​

"Pixels (PX) are a common unit of measurement in web design. They are fixed and useful for maintaining consistent sizing of certain elements. However, they can pose problems for responsive sites."

Relative EM (em)​

The em unit is relative to the font size of its closest parent element.

Root EM (rem)​

REM is similar to EM, but always relative to the root element (HTML tag).

Relative units like %, EM, and REM are better for responsive design and accessibility standards.