In web development, px, rem, and em are the most common length units in CSS. All set size, but their reference differs, so results can differ.
What is px
px is a fixed unit based on pixels. It is intuitive and easy to use for precise sizes, e.g. borders, icon size, small UI elements.
What is em
em is a relative unit based on the parent element’s font size. It changes with parent size, so in nested layouts it can look larger or smaller than expected.
What is rem
rem is a relative unit based on the root (html) font size. The reference is consistent site-wide, so it is often used for responsive design and accessibility.
When to use which
px fits when you need a fixed size. rem fits when consistency matters: global font size, spacing, layout gaps. em fits when something should scale with its parent, e.g. text inside a button or a component.
Common practice
Lately, many teams use rem for text and spacing and px for very small things like borders.
Why it feels confusing
At first the units look similar, but the reference differs, so the result can change a lot. em especially can compound size through parent nesting.
Wrap-up
px, rem, and em each have pros and cons. Decide whether you need a fixed size, parent-relative, or site-wide reference. EveryUtil unit converter can help compare px and rem values.