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

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

Carson Clark
Carson Clark
2,159 Points

General questions about specific properties and values.

Hello all, I have just learned about the max-width, margin, and padding properties and I'm confused about exactly it is what they do and how they interact with specific values.

max-width - So basically this property just allows me to set the width for any element?

Ex: If I create a div and I want it to be 100px wide I can use this, but what does that mean exactly? Why max? What does that really do? I don't understand the technical definition so if you could help me wIth some examples that would be great!

margin - I know this is used to center elements among other things but in summary, does it allow you to adjust how far away you are from other elements? Is there more to it?

padding: This allows you to extend the length of your elements? If so, what would be the point of a max width? I'm very confused and it's embarrassing because html/css is supposed to be easy!

Any help would be greatly appreciated!

3 Answers

Hi Carson,

I'll try to answer your questions so that you'll have at least some familiarity with it as you go into the deep dives.

max-width simply means that the element can't have a width greater than what the max-width is but it could be less than that. You might use this in conjunction with the width property.

For example:

div {
    width: 70%;
    max-width: 1000px;
}

So this means that the div is going to have a width of 70% of its parent container but not to exceed 1000px. So even if 70% worked out to 1500px the div would be forced to remain 1000px wide.

margins and padding -

Margins create space around your elements. Padding creates space around the content of your element.

Sometimes margins and padding can be used interchangeably with no visual difference on the page but there are some differences between them.

You didn't mention borders but they come between margin and padding. So if you want space between your content and its border you must use padding.

You might not have covered css background images yet but they show up in an elements content, padding, and border area but do not show up in an elements margin area.

Those are a few general things about margins and padding. Hopefully enough to get you started on understanding them better.

You may want to look up the "css box model" to see the relationship between an elements content, padding, border, and margin area.

Let us know if you have more questions or anything here isn't clear. As Cherie mentioned, it will probably make more sense to you as you get through the deep dives later.

Carson Clark
Carson Clark
2,159 Points

This was extremely helpful! Thanks for breaking everything down, I understand max-width now, and I think I'm starting to understand margins and paddings. Thanks for taking time to write that.

Cherie Burgett
Cherie Burgett
8,711 Points

First don't feel embarrased! You're doing the How to make a website course. They don't go into much detail on that course. They get your feet wet by helping you put together a good looking website. After you will take HTML and CSS courses that will explain everything in detail. I felt confused and as if I wasn't getting it all. Its a lot to take in all at once. But after doing the follow up courses, I had that previous experience of making the website to privide context.

Carson Clark
Carson Clark
2,159 Points

Ahh ok haha thank you that's very re-assuring.