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
The #wrapper element has a max-width: 940px; and padding: 0 5%. The padding means the #wrapper is 940px wide + 5%?
When Nick hits refresh the orange background increases in size. Why doesn't the padding go on the inside to honor the max-width of 940px? It seems so counter-intuitive to me. I am experienced in CSS so I already knew about this but it has always thrown me off.
Chris Shaw26,676 Points
The reason the padding gets appended to the overall width is because by default the box-model is content-box which doesn't inherit the padding to the width.
In order to solve this we can use the border-box model which is inclusive of padding which means our width will never change even if we set 100px of padding either side of the element.
Now days it's common practice to use border-box but sadly I see it defined to a global selector which is expensive and can cause unexpected results if you're not careful. I personally like to use it only on elements that require it as then you know exactly what's working outside the standard box-model and it keeps you from breaking 3rd party plugins which typically aren't built using a non standard box-model.
Hope that helps.
That's correct. By default, the width and height properties on an element apply to the content box only. Any padding, borders, or margin will be added on to that.
There is the
box-sizing property which allows you to alter the default box model. The default value is
content-box. This is the behavior you see in the video.
If you set it to
padding-box then padding will be included into the width calculation and not add onto it.
If you set it to
border-box then the borders will also be included in the width calculation.
You can read more about that here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Here's a support table for it: http://caniuse.com/#feat=css3-boxsizing
At this time, you should not use
padding-box because it looks like only firefox supports that right now. So use
box-sizing: border-box; had been used in this project then you would not have seen it increase in size when the padding was added.