Difference between px & % in CSS3

Question

When we use 10px & 10% them it will display different output. How px & % actually work?
Elaborate it with example.

Answer 1

px is a “fixed” unit of measure - it’s unit size is based on the actual number of pixels on device screen and will always occupy that many pixels regardless of its parent tag’s size.

% is known as “relative” units - it auto-resize according to his “parent tag’s” unit size.

https://www.quora.com/What-are-the-differences-between-px-em-and-in-CSS-Which-one-should-I-use-and-why