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 trialEnzo Cnop
5,157 PointsWhat is the "box-sizing: border-box;" pulling its dimensions from?
When you apply:
* {
box-sizing: border-box;
}
to a webpage. Is it just making the width of all elements fit 100% of the page? If not, how is it calculating width? It seems counter-intuitive to make a declaration that isn't 'attached'/'based' on anything, but maybe that's the point?
1 Answer
Steven Parker
231,236 PointsThe box-sizing property doesn't actually make any calculations, it just determines how calculations will be made by other rules.
This wonderful Box Model Demo made by Guy Routledge probably conveys the idea much better than a description.
Naty Sipka
5,212 PointsNaty Sipka
5,212 PointsThank you, I finally understand this topic thanks to this demo.
Enzo Cnop
5,157 PointsEnzo Cnop
5,157 PointsIt really helped my understanding. Thank you Steven.
I would also direct people to the chrome developer tools 'computed' tab. It is essentially the same thing, but shows you objects you highlight on real websites.