1
HTML/CSSIntermediate#css#variables
HTML/CSSBeginner#css#units
What are the different CSS units (px, em, rem, %, vw, vh) and when to use them?
px is an absolute, fixed unit. em is relative to the parent's font-size (compounds when nested). rem is relative to the root font-size only (predictable, preferred for typography/spacing). % is relative to the parent. vw/vh are relative to 1% of viewport width/height, great for full-bleed sections.
Example
html { font-size: 16px; }
.title { font-size: 2rem; } /* 32px, based on root */
.hero { height: 100vh; } /* full viewport height */
.card { padding: 1em; } /* relative to parent font-size */