CSS supports a variety of units of measurement for numerous style properties. These units can be divided into two broad categories: absolute and relative.
1. Absolute Units: These include inches (in), centimeters (cm), millimeters (mm), points (pt), and pixels (px). They are most often used in print media and also in screen media when precision is necessary.
Example: \`\`\` p { padding: 20px; } \`\`\`1. Relative Units: These include percent (%), em, rem, vw, vh, vmin, and vmax. They are relative to another measurement, often the size of the parent element or the size of the browser viewport.
Example: \`\`\` p { font-size: 2em; } \`\`\` or \`\`\` div { width: 50%; } \`\`\`1. Viewport units: These units are specifically related to the size of the browser’s viewport. They include vw (viewport width), vh (viewport height), vmin (viewport minimum), and vmax (viewport maximum).
Example: \`\`\` div { width: 50vw; } \`\`\`1. Font Scaling Units: Em and rem are scalable unit that’s used in web document media. An em is equal to the current font-size, for instance, if the font size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Rems are related to the font size of the root element (html).
Example: \`\`\` p { font-size: 2rem; } \`\`\` It’s important to remember that which unit to use depends on what you are trying to achieve. For flexibility and better control, relative units are more popular in web design. However, for more rigid and concrete designs, absolute units can be used.