Using unit "on" (or "rem") for responsive layouts

Reading some CSS articles about responsive layout I was able to understand some new "concepts", but some applications were still a bit confusing for me, which is the case of using em (or rem ) for creating < in more dynamic and responsive layouts.

I do not want to go into comparative details, for example, what is px and its difference between % , em or rem , but the application of these in general. I also do not want to go into such a detail level in the case of em or rem , because although they have some differences, they are very small details that can make the discussion very complex.

Going to the actual question now, I was able to understand the concept well when applied to the sources. By default the browser defines the initial source as 16px , so I should use variations in rem , so the source fits properly regardless of resolution, pixel density, etc ...

But what about other elements or properties? For example, let's say I have set p as follows:

p {
    font-size: 1rem;
    margin: 0 0 24px;
}

Or should I define it according to the same logic? For example:

p {
    font-size: 1rem;
    margin: 0 0 1.5rem;
    padding: 0 0.5rem;
    etc...
}

Regarding the configuration of other elements such as those that create the column system, I know that the use of % would still be more appropriate, but I also noticed a very constant use of em in @media() to define < in> break-points .

How ideal would this approach be, using em (or rem ) instead of px ? Or what considerations should I take into account in this decision making, with the goal of creating dynamic and responsive layouts .