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

Cindy Truong
Cindy Truong
9,853 Points
Posted by Cindy Truong
Cindy Truong
9,853 Points

Max-width, margin, and padding. What is the difference?

If you want an element to be a certain size can't you just use max-width only? I'm having a hard time understanding when I have to use padding or margin.

2 Answers

Robert Bennett
Robert Bennett
11,927 Points
Robert Bennett
Robert Bennett
11,927 Points

It would be good to learn the box model. The max-width property is used to set the maximum width of an element. This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides width.

Explanation of the different parts called = box model:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent in side.
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Cindy Truong
Cindy Truong
9,853 Points
Cindy Truong
Cindy Truong
9,853 Points

Thank you Robert! I've learned about the box model a while back, but completely forgot about it. Now it makes more sense.

Robert Bennett
Robert Bennett
11,927 Points
Robert Bennett
Robert Bennett
11,927 Points

You are welcome... I hope you keep going in your career being a programmer/developer.