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
Emmanuel Prempeh
1,769 PointsWhy should padding add space outside an element?
When I applied padding: 0 5%; and color to the #wrapper selector, the width of the wrapper expanded after refreshing the browser window. Please I need help on that.
2 Answers
Alex Heil
53,547 Pointshey Emmanuel Prempeh ,
the outcome you're describing is actually the default behaviour of the css box model. so say you have an element with a width of 400px and add 20px padding it would end in being 440px wide (400px main element + 20px left padding + 20px right padding). this would even increase if you add a border. if you add a border of 5px then the width of 440px turns into 450px (440px (element + padding) + 5px left border + 5px right border).
if you want to change this and have the element always be 400px no matter what padding or border you're adding you could change the box model to border-box. with that in place padding and borders would be automatically calculated (substracted) from the main width and the element stays at 400px.
hope that helps and have a nice day ;)
Zach Saul
11,156 Pointsi think most likely what took place is that the width of your content plus the padding exceeded the size of it's parent element so that's why you are seeing that extra space.