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

Stephen Poole
Stephen Poole
9,361 Points

Confused about differences between margin and padding...

I don't feel like I completely understand the difference between margin and padding. I can never tell why you should use one over the other. Even in the example he gives in this video, why would it not be possible to use margin where we used padding, and vice-versa? Thanks!

1 Answer

Justin Horner
STAFF
Justin Horner
Treehouse Guest Teacher

Hello Stephen,

I'll try to explain the difference to the best of my ability. Basically, the decision you make will be largely dependent on the context of the element you are styling.

Here's an example. Say you have a button that contains some text. The button is below an image. You want to increase the space between the border of the button at the inner text of the button. You wouldn't change the margins of the button because that would effect the distance between the button and the image; you want that to stay the same.

By changing the padding of the button, you've changed the spacing within the control, not it's relative position to other elements in the page.

I hope that helps.

Stephen Poole
Stephen Poole
9,361 Points

Amazing Justin, Thank you very much. Everything just clicked in my brain after reading this!