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

HTML How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Posted by Frenklin Hasani
Frenklin Hasani
1,754 Points

I didn't understood very well the properties and values of this div element introduced in this video.

Please can somebody explain me in a more detail way the properties used in these video for the div element ? I would really appreciate it

Philip Gales
Philip Gales
15,193 Points

Can you elaborate about what you don't understand? Is it the properties like 'max-width' or 'background', or the id tag #wrapper that is confusing?

3 Answers

Philip Gales
Philip Gales
15,193 Points

padding/max-width/margin

  • Padding Makes an element larger.
  • Margin Adds space around an element.
  • Max-width Tells the browser how wide an element can be.

First, you should just play around with all of these until they make more sense, but here is how I think of them:

  • Padding I can stuff things in my coat to make me bigger. If I stuff a lot of things in my coat, I may even need a larger coat. If you add padding to an element, that element is going to get bigger. The text won't get bigger, but if it had a red background, then that background will now take more space.
  • Margin This is like pushing things away from me. I no longer need a larger coat, but I do take more space. When you do this to an element, the text will not get bigger, and neither will the red background. It will just have more space around the red background.
  • Max-width My door has a max-width of 2 feet. I can move anything through my door that is 2 feet or less. When it comes to browsers, if your max width is 500px, then it will at most be 500px. It can still be smaller like 200px, just never bigger.

Weird way to think of it, but hope it helps. Try the code below and see if it makes more sense.

#wrapper {
    background: orange;
    padding: 90px;
    margin: 0px;
}

and

#wrapper {
    background: orange;
    padding: 0px;
    margin: 90px;
}

You will notice the first code will seem like the orange background takes more space, while the second code with a margin of 90px takes the same space, but the orange is smaller.

Scott Delman
Scott Delman
5,436 Points

Thank you!!!!!!

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Like Philip I'm a little lost as to what exactly you're not understanding. So, I'll go through the CSS a line at a time.

Here's the CSS for the "wrapper" div at the end of the video:

#wrapper {
    max-width: 940px;
    margin:  0 auto;
    padding: 0 5%;
    background: orange;
}
  • #wrapper denotes an element with the id="wrapper" in the HTML
  • The maximum width of this element is set to 940 pixels
  • The element has margins removed and is aligned horizontally inside the container
  • The top and bottom padding are removed and the left and right padding is set to 5% of the parent container
  • The background color is set to orange.

I'm not sure if there's anything else that's unclear, but if there is don't hesitate to let me know! :sparkles:

Frenklin Hasani
Frenklin Hasani
1,754 Points
Frenklin Hasani
Frenklin Hasani
1,754 Points

I don't understand padding/max-width/margin .