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

CSS CSS Basics (2014) Basic Layout box-sizing and max-width

Enzo Cnop
Enzo Cnop
5,157 Points
Posted by Enzo Cnop
Enzo Cnop
5,157 Points

What 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
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The 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
Naty Sipka
5,212 Points
Naty Sipka
Naty Sipka
5,212 Points

Thank you, I finally understand this topic thanks to this demo.

Enzo Cnop
Enzo Cnop
5,157 Points
Enzo Cnop
Enzo Cnop
5,157 Points

It 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.