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 Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

Posted by nagamani palamuthi
nagamani palamuthi
6,160 Points

can someone help me understand why we use the border-box and what happens when you add padding to left and right.

i dont get when he says it gets bigger than the 70% width

3 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Border-box causes the size to be measured from the outside of the border.

This includes the content, padding, and border in the size determination (but not the margin).

On the other hand, content-box only counts the interior in determining the size. This is probably best demonstrated graphically, where you can play with various properties and see how they affect the sizings differently.

:point_right: Try experimenting a bit with this great box sizing demo.

I found that a few minutes of experimentation made things much clearer than reading large quantities of documentation.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

border-box - The width and height properties (and min/max properties) includes content, padding and border, but not the margin

content-box - is the default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

an element is comprised of content, padding, border and then margin

when you increase padding, you are increasing the area between the content and border so it will basically push the border out farther.

osman musse
osman musse
90 Points
osman musse
osman musse
90 Points

Basically we use border box value : It forces the padding and border into the width and height of the element, Instead of it expanding.