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 Adding Pages to a Website Add Iconography

Posted by Tristan Brodtrick
Tristan Brodtrick
525 Points

Padding vs Margin

In this example we see Margin being used to push the list anchor elements from the left of the page and padding used to push the list items away from each other.

What is the difference between margin and padding and why can you use one to space both left to right as well as up and down in this example?

2 Answers

Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points
Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points

Hi Tristan.

The margin is the space outside the element, from the border outwards. Padding is the space inside the element, from text to border. An easy trick I use to visualize it's affects is to add a boarder around your element and play around with both the margin and padding properties.

There are a couple good examples of this on codepen right now

http://codepen.io/dhust/pen/LDnJg http://codepen.io/OddlyTimbot/pen/gieoE

I hope this helps!

Tristan Brodtrick
Tristan Brodtrick
525 Points

Thanks Sean,

That helps a lot. I must have gapped as when I got to the test at the end of the section, the difference between margin and padding was one of the questions. :)

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

I really don't think you'll find a better explanation than this: http://www.goer.org/HTML/intermediate/margins_and_padding/ to sum it up though:

The key difference between margins and padding is that padding adds extra space inside the border, while margins add extra space outside the border.

Think of padding as going inward from the border of an element, while margin goes outward from the border of an element.

Tristan Brodtrick
Tristan Brodtrick
525 Points

Thanks Mike.

Almost as soon as I had asked the question I was taking the test where that was one of the answers. Thank-you very much for the link I'm going to read up on this further.