px is an absolute unit — fixed regardless of context. rem is always relative to the root (html) element's font size. em is relative to the current element's own (or its parent's) font size — which means the same "1.5em" can compute to a different actual pixel size depending on where in the DOM it's used.
Why this matters for accessibility
Users who increase their browser's default font size for readability get that adjustment reflected properly in rem and em-based sizing, but not in px, since px deliberately ignores the user's font-size preference. This is the main practical reason many style guides push toward rem for typography and spacing.
Nested em is where the confusion starts
Because em compounds with each nested level that also uses em, a deeply nested component can end up with an unexpectedly large or small computed size — a classic "why is this text huge" bug that's hard to spot just by reading the CSS, since each individual em value looks reasonable in isolation.
TeckForge's CSS Unit Converter converts a value between px, rem, em, pt and % based on a configurable root and parent font size, so you can check exactly what a given em or rem value actually computes to in pixels before it surprises you in the browser.
