Welcome to the Treehouse Community
Looking to learn something new?
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?
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.
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.