🎨 HTML / CSS Intermediate

What is the difference between em, rem, px, vh, and vw units in CSS?

Answer

These are different CSS length units with important distinctions. px: absolute pixels — static, not affected by user preferences. em: relative to the current element's font-size — if the element's font-size is 16px, 1.5em = 24px. Nested elements multiply em values, causing "em drift." rem (root em): relative to the root element's font-size (typically 16px) — predictable and no nesting issue. Best for font sizes and spacing. vh (viewport height): 1vh = 1% of the viewport height — 100vh is full screen height. vw (viewport width): 1vw = 1% of viewport width. Use rem for most spacing, vh/vw for full-screen sections and fluid typography.