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
Nancy R
1,729 PointsThe #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.
2 Answers
Chris Shaw
26,676 PointsHi Nancy,
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.
Jason Anello
Courses Plus Student 94,610 PointsHi Nancy,
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 border-box instead.
So if 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.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Chris,
I seriously need to remember to refresh the page whenever I get distracted and can't answer right away.
I'm with you on the use of the universal selector on this. I can't imagine you would need this for more than a few elements on your page so why not apply it to those few elements that need it.
I did come across this just now: http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
I wonder though if it's still more efficient to just set it on the few elements that need it.
Chris Shaw
26,676 PointsChris Shaw
26,676 PointsFor older browsers such as IE8-9 it's far more efficient to use it only on specific elements, for more modern browsers specifically IE10+ you don't have to worry about using a global selector as much but I still don't like it as you're effectively altering the way you build your DOM which I've seen more bad come from it than good.
The other thing which not many people think about either is repainting, with a global selector defining a set of properties that can cause a lot of repaints if you're resizing an element in real time or changing the flow of the DOM structure, on mobile and tablet devices this can lead to performance issues such as input lag or complete if not done correctly and using accelerated technologies.