Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Doe
5,013 PointsIs percentage padding additive?
If a percentage value is given for padding, the space is calculated by taking a percentage of the overall width of the container.
e.g. 5% of a 500px wide container is given to padding-right, so the padding is 25px.
Is this 25px then added onto the container's overall width (making the total width now 525px), or is 25px of the 500px width given over to padding-right (making the non-padding zones of the container make up 475px of its overall width)?
3 Answers
Jake Lundberg
13,965 PointsYes, the padding is then added to the overall width making the element 525px wide. If you want to prevent this, you can use:
box-sizing: border-box;
This will make it so the width of the element remains at 500px. You can read more about box-sizing here:
John Doe
5,013 Points
Jake Lundberg
13,965 PointsSince the % is based off of the containing element, both padding and margin would continue to be based on the dimensions of the containing element. The change in size of the internal element would have no effect on how either is rendered.
Hope this helps!
John Doe
5,013 PointsJohn Doe
5,013 PointsAs a follow up:
If such an action causes the overall width to increase, would that overall width now be the width that is calculated for future percentage-based layout values?
E.g. I set padding to 25% of a 100px-wide box. If I set margin to 25% of this box after that, is the margin's 25% value calculated based off the original 100px box width, or the new width with padding added on?
Thanks so much for the help!
EDIT: I see the question is answered within the link, apologies!