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

HTML How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Posted by Troy Vasquez
Troy Vasquez
Courses Plus Student 1,561 Points

Why 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
Jason Anello
Courses Plus Student 94,610 Points

Hi 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
Christopher Sea
3,726 Points
Christopher Sea
Christopher Sea
3,726 Points

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