Welcome to the Treehouse Community
Looking to learn something new?
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,650 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.