When to use rem, em or px?

If you look for terms like "em vs rem" in a search engine, you'll discover there's a bit of controversy around this decision. One post I saw even had the amusing title of "CSS Unit Battle: EMs Vs. REMs…FIGHT!"

They are both font-size relative units, but the essential difference is that ems are relative to the parent element, making them a more modular choice, and rems are relative to the document root, making them simpler if a bit more rigid to the design. It may take some experimentation and/or experience to get a sense for which you prefer in what situations. And it may not be the same as another developer.

Pixels (px) on the other hand, are not relative and are a good choice for dimensions of things that you don't want to change along with font sizes at all.

But there's rarely only one "right" choice. It's mostly a matter of considering what role the thing being sized has in the overall design, along with your own preferences. It's one of those things that should become more clear with a bit of experience and/or experimentation.