Welcome to CSS Basics. More info on this section at the bottom of this post.

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.

Questions? Clarifications?

This post is not intended to be an exhaustive reference on this subject. It's meant to provide a simple CSS tip for beginners. If you have any questions or clarifications on anything I've said here, add them to the comments. If necessary, I'll continually improve this article to keep it up to date with the latest CSS standards and best practices.

This is the CSS Basics section of Impressive Webs. These posts do not appear in the main home page feed. You can subscribe via RSS or get an email notification whenever a new post is added.

Advertise Here

26 Responses

  1. Alan:

    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:

    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 :)

    • Kc Rajput:

      You are right Stefan. But some time it make confuse to learner. Simply we can say margin will add space out of box and padding will add inside the box.

      • Jasmine:

        Thank you for posting this. I always forget that the padding adds to the div dimentions & then, when I am setting up my wireframes, I get my math all wrong and end up giving up on padding and going with like a million nested divs only using margin = not clean code. HORIZONTAL PADDING ADDS TO THE WIDTH OF DIVs.

    • Shiva:

      Actually for the box use box-sizing: border-box and all the resizing problems go away

  3. Shiva:

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

  4. 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. 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:

    Nice info!

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

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

  9. mouniika:

    thank u so much for the info

  10. 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:

    thanks a lot..

  12. Sanjay Kumar:

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

  13. king alawaka:

    thanks good one

  14. Ashokkumar:

    please explain the padding concept clearly.

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

  16. Alan:

    Best description of the difference between them on Internet.

  17. kelly:

    short yet well explained. Thanks for this article.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.