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
Treehouse Moderator 47,741 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!