XF 1.5 What Is the Difference between Padding and Margin?

[Amaury]

Maybe I just haven't paid enough attention, but at least in the examples below, both margin-bottom and padding-bottom do the same thing:

 

[Ozzy47]

This sums it up nicely, http://blog.digitaltutors.com/whats-difference-margin-padding/

 

[Paul B]

Padding is for spacing around content within elements.

Margin is for spacing around elements.

 

[Paul B]

If you use Chrome and click on the Computed tab in the inspector, it actually shows you the details:



You can then hover over each item and it will highlight it on the page.

 

[Amaury]

Thanks, guys.

In other words, margin is basically for the whole thing. Now it's just a matter of figuring out which one's more appropriate, but I guess in the end they're both valid and essentially do the same thing, so it doesn't really matter. Please correct me if I'm wrong, though.

Edit: Thanks, Brogan! I'll be sure to look at that.

 

[Paul B]

Although you may be able to achieve the same effect in some cases, they are different and do have different use cases.

https://www.w3.org/TR/CSS2/box.html

http://www.w3schools.com/css/css_boxmodel.asp

 

[Amaury]

Thanks!

Looking at the image you attached above and then inspecting the elements and looking at that grid on KH-Flare, it looks like padding would be more appropriate.

 

[Mr Lucky]

Although you may be able to achieve the same effect in some cases, they are different and do have different use cases.

Exactly

In other words, padding is a margin inside the element, margin is a margin outside.

Especially obvious if there is a border, but if there is no border you are correct in that both can have the same effect when one element is next to another as they both add space.

It is confusing because in a word processor you think of the margin as the space between text and edge of document. You can think of this either as the text block's margin or the document's padding.

 

[Amaury]

Mr. Lucky, that's a good way of remembering it since I assume you're referring to a literal border. Use margin if targeting outside the border and padding if targeting within the border. Although I can see that potentially being tricky sometimes since what you think may be outside of the border could actually be within the border and vice-versa.