What’s the Difference Between Margins and Padding?

For experienced CSS developers this is a very simple topic. But this being a CSS for beginners section of Impressive Webs, I thought it would be good to address this topic as briefly and as effectively as possible for those just starting out.

What Are Margins?

Margins in CSS make up the vertical and horizontal areas between elements. If elements have no margins around them, they will bump right up against each other. Some elements have margins by default, so often even if you haven’t added a margin, you may still see one.

Here’s a visual demonstration of CSS margins:

CSS Margins

It’s pretty simple. The space outside of, or between, elements is what comprises the margin areas. This area would also be outside of any borders set on elements.

I should point out there there could be other reasons for elements to have space between them — not just margins. But for the purpose of this simple post, we’ll just assume that all the vertical and horizontal space shown in that image is caused by margin settings.

Margins can be set using the margin property (which is shorthand, representing the four margin values for an element) or by the longhand margin-top, margin-right, margin-bottom, and margin-left properties. The order in shorthand is: top, right, bottom, left.

What is Padding?

So what about padding? Well, the padding of an element is the horizontal and vertical space that’s set around the content area of the targeted element. So padding is on the inside of a box, not the outside.

Here’s a visual demonstration of CSS padding:

CSS Padding

In this example, there’s a single element with text centered within that element. The centering could be done in a number of ways. We’ll assume it’s done via the CSS padding property. So the padding is the area inside the element that separates the content of the element from the element’s edges. In this example, the element could be a paragraph tag (<p>).

Similar to margins, padding is set using the shorthand padding property, and can also be done using longhand: padding-top, padding-right, padding-bottom, and padding-left.

Summary

So, in brief, margins separate elements from each other and away from page edges, adding space outside of elements. Padding adds space inside of an element, separating the element’s content from the edges of the targeted element.

31 Responses

  1. Alan says:

    Hiya, I believe it’s always a very good idea to teach folk to avoid horizontal padding (although there are sensible ways to use it as with everything) and only to use vertical padding in one direction, that’s just the way I build things but I never run into box model / margin collapse issues.

    Anyway, just a wee note ;)

  2. Stefan says:

    What people always forget to mension is that horizontal padding adds to the width of the element ( div..). I think you should also mention this and give an example.

    If we have a 100px box and add left and right paddings, both lets say 10px, then we have to change the width of the box to 80px ( 80px width + 20px padding = 100px ).

    Nice article btw :)

  3. Shiva says:

    It never hurts to have a reminder about padding and margins. They are two of the biggest display crushers for beginners

  4. hudson kotel says:

    Hello,

    I find out to new link of padding & margin in css.This link is very helpful related to padding & margin in css of php.This link as under….

    http://www.phphunt.com/22/padding-and-margin-in-css

  5. DelhiTrendZ says:

    Thank you for this basic information. I was little confused about the two and struggling a bit when designing the layout of my site. But now everything should go smooth I guess!

  6. Lakhveer Kaur says:

    Nice info!

  7. Di Hercowitz says:

    to solve the problems of adding padding pixels in height and width, maybe could be uses box-sizing from css3 :)

  8. Yogesh says:

    Nice Information ideas got cleared as its always have revised info regarding padding and margin
    Thanks for sharing

  9. mouniika says:

    thank u so much for the info

  10. Konrad says:

    ok ok, so then why do we need to be BOTH padding and margins?

    The only use for having both that I can think of (and I am a complete newb) is so that you can have a border far away from a block of text using padding, and then use margins to stop that border from touching other elements.
    But are there any other reasons or purposes for having both padding and margins?

    • With padding, you are able to space out the content from the edges of the box, inside the box. And yes, so as you mentioned, if there is a border, then the margin can separate the border from other elements, and padding can separate the border from the element’s content.

      Also, when an element has a background color or background image, the background cannot cross over into the margin area, it can only cover the padding area (which it does by default). So that’s another reason. Once you get used to it, you’ll see that it’s very useful to have both.

      It might help to use a site like CodePen or JS Bin to mess around with these things and see them live in action without having to create a real page.

  11. jobin mathew says:

    thanks a lot..

  12. Sanjay Kumar says:

    I am confuse about Difference Bitween margin & padding . please help me

  13. king alawaka says:

    thanks good one

  14. Ashokkumar says:

    please explain the padding concept clearly.

  15. Akhlas Ahmad says:

    Thanks a lot for this informative guide. I was confuse about margin and padding. Now my mind in clear about both.

  16. Alan says:

    Best description of the difference between them on Internet.

  17. kelly says:

    short yet well explained. Thanks for this article.

  18. yash says:

    Thanks a lot for the article.

  19. This post appears the clearest explanation I have read on this topic. Thanks for the post

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).