XF 1.5 What Is the Difference between Padding and Margin?


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


XenForo moderator
Staff member
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.


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


Well-known member

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
Although you may be able to achieve the same effect in some cases, they are different and do have different use cases.

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.


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