The difference between px, em and %.

px 

This is a static unit of measurement, specific to digital screens. One pixel (px) is related to one dot of color information on a computer screen. (Or tablet, mobile, smart watch, TV, etc.)

Think of a grid of hundreds of thousands of boxes and each box contained a very small amount visual information about a website's design.

So for example, if you set a margin (outside space) of 10px between a button and an image, then there would be a gap between those elements, equal to 10 grid boxes. 

em

This a scalable unit of measurement, based on the current font site. So if the current font is 18pt, then 1em = 18pt. 2em would be 36pt. .5em would be 9pt.

This is great for responsive design and accessibility, do to it's scaleable nature.

%

The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.