How to correctly recalculate margins and padding from px to em?

Question

Adaptive design

Please tell me if I understand correctly the rules for recalculating margins and indents from px to em? If the element is given a font size, then the margin and padding are divided by it, and if not set, are they divided by the parent's font? I tried it according to the method of Eaton Marcot, i.e. margin is divided by the font size of the parent, and padding is divided by the font size of the element itself, so such a division does not always work ... Tell me how is it right?

Answer 1

Margin and padding in em are always calculated from the font size of their element using the formula:
where font-size(px)is the calculated value of the font size. Although the font size itself can be set in any units of measurement or can be inherited from any of its parents.
When the parent chain is set to em font size, it's very easy to get confused with all these conversions. Be guided by the calculated value, which can be viewed in the developer tools in the browser (see the right column).

Answer 2

Easier to convert to rem:
1rem = 16px