Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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.