A summary talking about some css units and their best use cases

Using the unfamiliar css units

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
    - can be used with margin/padding if you want them to change with the font-size space of the element (buttons for example, you may need to update the padding with larger font-size values)
    - if you set *{margin-top:1rem} then each element has top spacing based on his font-size

percentage:
    - goot to use width & height widths especially with the max-width, min-width, max-height and min-height 

viewport units:
    - goot to use width & height widths especially with the max-width, min-width, max-height and min-height 
    - take care with using vh as vh may change alot with mobile devices (things as keyboard may ruin your final result)

ch:
    - a width of any character of that font (width of 'Hello' = 5ch)
    - better for setting max-width for paragraphs as 
    - it's better for the user to have at max 75 characters per line as you may need to set paragraph's max-width to be 75ch

Notes:
    - try not to set a height, try to avoid that
    - if you really need to set one let it be a min-height to give your elements thier space