Percentage size of paddings

Well from how I understand it, padding adds a space between a box and the contents within it. So if you specify a pixel based padding then, the content will be pushed away from the box the specified pixels.

Percentages work based on the box's main width, so for example if you have a box, lets say we call it, #content-box, and give it a width of lets say 300px, and a padding of 1% 5% 5% 10% (not a realistic value at all):

#content-box {
width: 300px;
padding: 1% 5% 5% 10%;
}

Then the content will be pushed 1% of 300 (in pixels) from the top of the box, pushed 5% of 300 (in pixels) from the right and bottom of the box, and finally pushed 10% of 300 (in pixels) from the left of the box.

• padding-top = 1% of 300px = 300 x .01 = 3px;
• padding-right = 5% of 300px = 300 x .05 = 15px;
• padding-bottom = 5% of 300px = 300 x .05 = 15px;
• padding-left = 10% of 300px = 300 * .10 = 30px;

Hopefully this was enough to help, if you still need help let me know!

Edit: Changed post for readability - Dane E. Parchment Jr. (Moderator)