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

Posted by Kian Tahsini
Kian Tahsini
7,138 Points

When to use margin and when to use padding?

I think I understand the difference between margin and padding (margin is outside of the border and padding is between content and border, right?) I just don't understand when to use margin and when to use padding. Also how do I figure out how much space I should put. Is it just trial and error?

2 Answers

Laura Cressman
Laura Cressman
12,548 Points

Great question! You are right that padding is the space between the content and the border (whether the border is visible or not), while margin is the space between the border and the other content. The best way I can think of to get your head around this is to play around with it. Here's a code pen to get you started:

http://codepen.io/hilaura13/pen/myPGXw The first div has a margin of 20px, while the second has padding of 20px. Feel free to change it around though and see what happens!

For reference, here is the CSS box model: http://www.w3schools.com/css/css_boxmodel.asp

Hope that helps! Smile more, Laura :)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Kian,

Your description is correct.
Margins are used when you want to set space between two elements on your page, for example you might want a large white space between your website name text and the start if a blog post.
Padding would be used for the text within your blog post, for example if your text area had a blue background it wouldn't look very nice if the text was right up against the top, bottom, left and right sides of the box, so you'd give the text padding to move it away from the edges.

Hope this helps.