Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap Basics Responsive Layouts With the Bootstrap Grid Styling Content

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,107 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

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

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

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

A-ha! Thanks!

You're very welcome!