In order to determine which unit of CSS to use, it is essential to have a solid understanding of the different units available. Your unique vision for your website's styling will guide your decision on which unit to implement, whether it be static or dynamic/responsive. To make an informed choice, familiarize yourself with the various types of CSS units and their respective advantages. Explore the comprehensive breakdown of units like em, rem, and more at this W3Schools link:
https://www.w3schools.com/cssref/css_units.asp
Specifically discussing 'rem', it represents the font-size established for the root element, which is <html>. By default, the font-size of the <html> root element is set to 100%, equivalent to 16px as prescribed by the browser. This value can be adjusted in the browser settings or overridden within the CSS using html {font-size: 20px}. Any font-size defined for the html tag will correspond to 1rem.
While rem can be utilized for padding and margin properties, it may not be the most ideal choice due to potential issues with responsiveness. For instance, if a user alters their browser's default font-size to 25px while navigating your site, it could disrupt the design layout based on rem values. Therefore, for responsive designs, percentages (%), viewport width (vw), and viewport height (vh) units are often favored. In contrast, pixels (px) enable precise sizing without automatic adjustments.
Having determined the appropriate size for your website elements, employ the suitable CSS units accordingly to achieve the desired outcome. Remember to prioritize comprehension of the underlying principles before seeking external opinions, enhancing your coding proficiency. Happy coding!