EasyConcept
What is the difference between em, rem, %, vh and vw in CSS?
- Technology:
- CSS
- Topics:
- CSS Layout
Quick answer
em is relative to the parent font size, rem is relative to the root font size, % is relative to the parent鈥檚 relevant size, and vh/vw are 1% of the viewport height or width.
Detailed explanation
rem is the default choice for type and spacing because it stays predictable when components nest. em compounds: a 1.2em padding inside a 1.2em heading is larger than you think. % on width is the parent鈥檚 width; % on height only works if the parent has an explicit height.
100vh is the full viewport height, which on mobile can include the area hidden by the browser chrome and cause jumpiness. Newer units such as svh, lvh and dvh address that. For fluid type, clamp(1rem, 2vw, 2rem) is a common pattern.