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
Ryan Jin
15,337 PointsWhy do you even want to have padding if you use box sizing
Why do you even bother to use padding when box sizing just basically deletes the padding and make the width or height the content width and content height?
3 Answers
Michalis Efstathiou
Courses Plus Student 4,638 Pointspadding is there, its just that instead of the container expanding to accomodate the padding, the content shrinks
Michalis Efstathiou
Courses Plus Student 4,638 Pointsbox sizing does not delete the padding, heres an example
without box-sizing:
width of container: 100px | padding: 5px | total width of container: 105px
with box sizing:
width of container: 100px | padding: 5px | width of container: 100px
so padding is still there, it just doesnt affect the width of your container, and you may want padding so that your content doesnt stick to the side, but you want your container width to not increase when you apply a padding
Ryan Jin
15,337 PointsSo what does the padding do with the box sizing. It seems like that it doesn't exist.
Nicholas Johnson
12,945 PointsMichalis Efstathiou In your example, would the width of container without box-sizing not be 110px?
Michalis Efstathiou
Courses Plus Student 4,638 Pointswell it depends, if your image is responsive it will shrink yes, if your image is not, then it will overflow from its container
Ryan Jin
15,337 PointsRyan Jin
15,337 PointsSo if I have an image that is 100px tall and 100px wide, I add a padding of 10px on each side, and use box sizing. The image will shrink to 80px by 80px?