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

Posted by mm4
mm4
8,600 Points

Margin vs. padding

I'm still not really clear on the differences between margin and padding. I have sample code here:

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: .9em;
  color: #bdc3c7;
}

It's hard for me to see, when refreshing the website, what changes are being made and how margin/padding are behaving. Does anyone have a clear example?

2 Answers

mm4
mm4
8,600 Points

I'm following the web design track so I haven't done much with the border yet but this diagram is helpful. Thank you!

James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

Think of any HTML element as a box. Padding is space added inside the borders of the box, while margin is space added outside the borders of the box.

Some useful things to remember. When adding padding to an HTML element it actually adds to the overall height and width of an element. Therefore if you have an element that you didn't set the height or width for but have a 20x20px high image inside of, and add a padding of 5px on all 4 sides the true dimensions of the container element is 25px vs 25px yet with margins the overall size of the container would still only be 20x20. This is important when you are writing javascript to manipulate CSS.

mm4
mm4
8,600 Points

Ah, I didn't notice until you mentioned it. Thanks for the heads-up!