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.

CSS CSS Layout Basics CSS Layout Project Introducing the Project

Using padding vs width/margin for white space on left and right sides of the screen

Https://teamtreehouse.com/library/css-layout-basics/css-layout-project/adding-media-queries-for-large-screens

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

Hi 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
Michael Hulet
47,869 Points

This 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 padding is on the inside of the element, and the margin is on the outside of the element. If you want the element to have spacing around it, you should use margin. If you want just the content to have spacing around it, use padding

Thank you both very, very much. This cleared up a lot of questions for me!