HTML/CSSAdvanced#css#units

What is the difference between relative units vw/vh and %?

% is relative to the parent element's corresponding dimension, so a nested element's percentage depends on its ancestor chain. vw/vh are always relative to the viewport itself (1% of viewport width/height), independent of parent sizing, useful for full-bleed elements regardless of nesting.

Example
.full-bleed { width: 100vw; margin-left: calc(-50vw + 50%); } /* breaks out of a centered container */
.half { width: 50%; } /* depends on parent width */

Related Questions

1
HTML/CSSBeginner#css#box-model

What is the box-sizing property and why is border-box generally preferred?

Open
2
HTML/CSSBeginner#css#pseudo-classes

What is the difference between :hover, :focus, and :active pseudo-classes?

Open
3
HTML/CSSAdvanced#css#pseudo-classes

What is the difference between :focus and :focus-visible?

Open