ibnsamy96

rem:
    - relative to the font size of the root elemnt (initially 1rem = 16px)
    - better for font-size as it works well with browser font-size preferences (user may change his default font-size value)
    - working with rem can be by setting font-size value in the HTML element to be 62.5% ( now 16px = 1.6rem & 37px = 3.7rem ...)
    - can be used with margin/padding if you don't want them to change with the font-size space of the element
    - if you set *{margin-top:1rem} then all elements has the same top spaceing

em:
    - relative to the font-size of its direct or nearest parent
    - better to be used with media-query values as px & rem have some compatibility issues for some browsers