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
brevans26
15,198 PointsMargin vs Padding
This is one thing I never understood completely: When should I apply margin space to a heading, for example? When should I apply padding? Is there a difference between them? Obviously there is, but I cannot tell. Tome, the results are the same but I have a feeling that for some reason they are really not.
Thanks!
2 Answers
Kevin Korte
28,148 PointsHey there,
You're correct, they're not the same, however the confusion is normal. Once you understand the box model well, the differences will be clear.
In the box model, you have the element itself, then padding, then the border, then the margin. Meaning, if you add padding, you're adding space between the element and the element's border.
If you are adding margin, you are adding space from the elements border, to other elements.
Check out this article to read more: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
Also, note. Stacked margins collapse, padding does not. What does that mean? Well, let's say you have a list of items, and you add a margin of 20px to the top and bottom of each element. You might at think first that between two items, there would be 40px of space (20px from the bottom margin of item 1, and 20px from the top margin of box 2, but that's not the default behavior, it would only be 20px since the margins would collapse on themselves.
Here is an example: https://codepen.io/kevink/pen/rYxXvL
Here is a little more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Matt Brock
28,330 PointsVisually, they can achieve the same results. However, they are different parts of the CSS Box Model. Perhaps the biggest difference is that two adjacent vertical margins will collapse on one another, and only the larger of the two will be applied. So, if you have an <h1> with margin-bottom: 30px followed in your HTML by a <div> with margin-top: 10px, you would expect the two elements to be 30px + 10px = 40px apart. However, the browser will only use the 30px margin-bottom. This does not happen with padding. Here's are a few good resources to read through detailing further differences between margin and padding:
brevans26
15,198 PointsA-ha! Thanks!
Matt Brock
28,330 PointsYou're very welcome!
Matt Brock
28,330 PointsMatt Brock
28,330 PointsHaha we answered at the exact same time. Great explanation (and resources...lol)!
brevans26
15,198 Pointsbrevans26
15,198 PointsIsn't this mind blowing? Thank you for the response and the resources!