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

Anthony c
Anthony c
20,907 Points
Posted by Anthony c
Anthony c
20,907 Points

What is the point of adding padding if box-sizing just omits it?

I have content with a width of 100px.

I have left and right padding of 10px.

This is a total of 110px

Then I include box-sizing.

MAIN QUESTION: How does the layout with "padding + box-sizing" differ from a layout with JUST a width set at 100px and no padding?

2 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

I have made you an example here: http://codepen.io/anon/pen/rOEGWe

This should help visually explain my answer.

Padding is like margins but inside your element.

See how in the second box in my example the text is 10px from the top and left, this is because it's parent has 10px padding applied.

I put the 3rd box in to demonstrate that without box-sizing:border-box the box actually becomes 120px in width and height as the padding is not included in the size of the box.

In the 4th example I have put a white box inside the red box to visually show where the padding is on the red box.

Paul Cox
Paul Cox
12,671 Points
Paul Cox
Paul Cox
12,671 Points

Fantastic answer, just a slight typo on the width of the box without box-sizing: border-box. It's 120px because it has 10px of padding on both sides.

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

So it is to say this. I want an element to have a dimension of 500px. I want to establish some padding in between the content and the content edge of the box but keep my 500px. So the original dimension of the element is shrunk to 480px to compensate for the 20px of padding. That is where box sizing comes into play.

Anthony c
Anthony c
20,907 Points
Anthony c
Anthony c
20,907 Points

makes sense thanks