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
Lauren Atkins
7,895 PointsUsing padding vs width/margin for white space on left and right sides of the screen
When I was working with the white spaces to the left and right of the page I used padding instead of width/margin to create a similar effect. I am suspicious that my version of using padding is more likely to cause problems in other formats or situations. Am I right? Why, exactly, is this not the best way to create that space to either side of the reading area?
.container { width: 90%; margin: 0 auto; }
----- vs -----
.container { padding: 0 5%;}
1 Answer
Jon Mirow
9,864 PointsHi there!
Nothing wrong with what you've done. The purpose of padding is to push content in from the sides, or grow the element away from the content and this does that.
There are some functional limitations to doing this - if you had a background image on the parent, your container's padding would cover it up. You could make its background transparent to see the parent background, but that would apply to the whole container. Similarly common effects like a border, border radius and box shadow aren't available. However, this design choice very common on mobile layouts where all you want is a content box the width of the screen and the content pushed in a few pixels.
For most developers though, it's more semantic really. You're designing a page, and you want a block of text that's centred and about 60% of the width of the page on a screen over a certain size. Or you're designing a page on a very narrow width screen and you want a container that's full width, but you don't want the content to touch the sides of the screen. These are quite natural ways to think about how you'll lay out the content, and that translates into the code.
Hope it helps, the tl;dr is basically that in your example the container is the full width of the parent, in their example it isn't, use each where it makes sense to use :)
Michael Hulet
47,913 PointsMichael Hulet
47,913 PointsThis is a brilliant answer, so I'm gonna add this as a comment instead of my own answer, because I think it needs to be said:
The
paddingis on the inside of the element, and themarginis on the outside of the element. If you want the element to have spacing around it, you should usemargin. If you want just the content to have spacing around it, usepaddingLauren Atkins
7,895 PointsLauren Atkins
7,895 PointsThank you both very, very much. This cleared up a lot of questions for me!