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 Bootstrap Basics Responsive Layouts With the Bootstrap Grid Styling Content

Posted by brevans26
brevans26
15,198 Points

Margin 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
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Hey 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
Matt Brock
28,330 Points

Haha we answered at the exact same time. Great explanation (and resources...lol)!

brevans26
brevans26
15,198 Points

Isn't this mind blowing? Thank you for the response and the resources!

Matt Brock
Matt Brock
28,330 Points
Matt Brock
Matt Brock
28,330 Points

Visually, 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:

  1. https://codepen.io/carolineartz/pen/ogVXZj
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
  3. https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css
brevans26
brevans26
15,198 Points

A-ha! Thanks!

Matt Brock
Matt Brock
28,330 Points

You're very welcome!