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 trialTristan Brodtrick
525 PointsPadding 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
18,968 PointsHi 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!
mikes02
Courses Plus Student 16,968 PointsI 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
525 PointsThanks 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.
Tristan Brodtrick
525 PointsTristan Brodtrick
525 PointsThanks 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. :)