1. 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?

Discussion in 'Styling and Customization Questions' started by Amaury, Mar 27, 2016.

  1. Amaury

    Amaury 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
  2. ozzy47

    ozzy47 Well-Known Member

  3. Brogan

    Brogan XenForo Moderator Staff Member

    Padding is for spacing around content within elements.

    Margin is for spacing around elements.
    Amaury likes this.
  4. Brogan

    Brogan 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.
    Steve F and Amaury like this.
  5. Amaury

    Amaury 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.
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Amaury likes this.
  7. Amaury

    Amaury 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.
  8. Mr Lucky

    Mr Lucky Well-Known Member


    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 likes this.
  9. Amaury

    Amaury 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.

Share This Page