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

HTML How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Posted by ibrahim Warsame
ibrahim Warsame
7,803 Points

Serious help with padding.

To say it like these, i'm really confused!!! first of all, what is the difference between content-box and border-box. second, when Nick wanted to add padding around the text inside the footer he wrote

padding: 0 5%;

couldn't he just use the px unit insteade of the % unit, and what did he mean by saying "This will be 5% of the total width of the wrapper element itself". Did he mean that the padding around the text will be 5% of the total width of the wrapper element which is 940px, so 5 percent of 940 will be 47 Px. Am i right or am i imagining som weird stuff.

1 Answer

Tom Checkley
Tom Checkley
25,165 Points
Tom Checkley
Tom Checkley
25,165 Points

Yes that is correct, it would be 47px inside a fixed width container. % is used for responsive design layout. As all screen widths are different. It is a way of making it proportional. Say you had a header that you wanted to be 90% of the screen on every device, you wouldn't be able to specify in pixels as a pixel is a fixed size, so you use a percentage. If the wrapper was specified as a percentage. Say 80%, it would take up 80% of the screen width, if you put the header in the wrapper it would take up 90% of the wrapper that takes up 80% of the screen.

A border box is where the border is inside the elements width. so if you had a border on the afore mentioned header that was 90% width, you would be left with 10%. Normally a border is outside the box model.

Check out this link https://css-tricks.com/box-sizing/

A content box is exactly that, just the content. The padding, border and margin are not included in the width/height. so our banner if it was a content box, with 90% width, and 2.5% padding left and right, would take up 95% of the screen.

Hope this helps