I'v been trying to find an answer to this question on the internet but couldn't find anything that explained it well. I'm still confused and have no idea how to figure out the percentage of a padding that's in pixels. For example i'm looking at a website design and I know that an <h1> needs a 10px padding on top, but how do I figure out what the padding is in percentage?
What is the difference between PX, EM and Percent?
Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.
You've asked about 10px padding on top of h1:
You know that the height in pixels is 100%. So 10% will be 10 percent of that. If your h1 is 50px, 10% padding-top will be 5px.