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

CSS CSS Basics (2014) The Box Model Padding

Posted by tian jin
tian jin
Courses Plus Student 5,162 Points

set padding as percent value: the percentage is relative to the width of the box? But what's the width of the box?

I guess the width is just the content's width, not the box's width?

tian jin
tian jin
Courses Plus Student 5,162 Points

in the video, Guil said total width of the container, so that's equal : content + 2*padding + 2*border, but how you set padding's percentage value when the equation has padding?

1 Answer

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

The width of the box doesn't really matter. The box could be a set width (500px) or a percentage width: (46%). When they say to set the padding to a percentage of the width, the padding will be x% of whatever the width of box is. So, if you set the padding at 5% and the box is a 500px width, then the padding will be 25px. But, if the width box is a percentage of 46%, then 5% will calculate based off that...so, if the browser is resized, the width of the box is resized automatically, and so will the padding.

tian jin
tian jin
Courses Plus Student 5,162 Points

thanks, that make sense

actually I find the percentage is relative to the box's containing elements.