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 trialTroy Vasquez
Courses Plus Student 1,561 PointsWhy did the div width increase when padding was added? With a max width, shouldn't it have stayed the same?
Around 5:15 of the video, 5% of padding was added to the div. I was expecting the elements inside the div to be pushed inward but instead, the 5% looked like it was added to the div. Am I missing something? Did the padding overwrite the max width?
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Troy,
By default the width of the element only includes the content box and not the padding or border box.
When you add 5% padding, this is added on top of the 940px.
This can be changed with the box-sizing
property. The initial value is content-box
which is the behavior you're witnessing.
You can change it to border-box
and then both the padding and borders (if any) will be included in the width calculation.
box-sizing: border-box;
If you add that in to your css then you should see it shrink back down to what you were originally expecting to see.
Here's the mdn page for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Christopher Sea
3,726 PointsI was looking at my water bottle while reading this, and thought it was quite similar. Think of the wrapper as the bottle itself; it sets a specific amount of space for the water (64oz). If you start filling up the bottle with water and don't stop, the water will overflow and spill out of the bottle. But if you do stop filling the bottle (set an max-width for the image), it won't overflow. As for padding & borders, that can be thought of as the thickness of the plastic.