(CSS) px, em, rem 도대체 뭐가 다른가요? 반응형엔 뭘 써야 할지 모르겠어요

CSS 공부한 지 얼마 안 됐는데 단위가 너무 헷갈립니다. 그냥 처음엔 다 px로 때려박았거든요. 근데 강의 보다 보니까 어떤 사람은 rem 쓰고 어떤 사람은 em 쓰고 그러더라고요. 셋이 뭐가 다른 건지 감이 안 잡혀요.

일단 제가 이해한 건 px는 그냥 고정 픽셀이라는 거고, em이랑 rem은 뭔가 상대적인 값이라는 건데 이 상대적이라는 게 뭘 기준으로 상대적인 건지를 잘 모르겠어요.

예를 들어 이렇게 써봤는데

.box {
  font-size: 16px;
  padding: 2em;
}
.box .inner {
  font-size: 20px;
  padding: 2em;
}

여기서 같은 2em인데 안쪽 padding이 더 커지더라고요. em이 부모 폰트 크기를 따라간다 뭐 이런 얘기 같은데 그럼 중첩되면 자기도 모르게 값이 계속 불어나는 거 아닌가요? 그게 좀 무섭습니다.

그리고 rem은 뭔가 루트 기준이라는데 이건 그럼 안 불어나는 건가요? 실무에서 반응형 만들 땐 폰트나 여백에 어떤 걸 쓰는 게 맞나요. 그냥 px로 다 고정하면 안 되는 이유가 있는지도 궁금해요. 사용자가 브라우저 글자 크기 키우면 px는 안 커진다는 얘기도 들었는데 그것 때문인지... 실무 감각으로 언제 뭘 쓰는지 정리 좀 해주시면 감사하겠습니다.