• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 What Is the Difference between Padding and Margin?

Amaury

Well-known member
#1
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:

Styling 1.PNG

Styling 2.PNG
 

Brogan

XenForo moderator
Staff member
#4
If you use Chrome and click on the Computed tab in the inspector, it actually shows you the details:

upload_2016-3-27_18-7-54.png

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

Amaury

Well-known member
#5
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.
 

Amaury

Well-known member
#7
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

Well-known member
#8
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

Well-known member
#9
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.