Skip to main content

Margin Vs Padding - CSS Properties

CSS provides two properties named margin and padding for keeping space between HTML Box type elements.
But why do we have two properties for the same reason? Are they similar?

No. They have a main difference.
  • Padding - defines space between border and element content
  • Margin - defines space between border and other outer elements
So when elements needs space between them, better to use margins. When text or an inner element needs space between the parent box and itself go for padding.

Demonstration

Look at the code example for visual clarification.
Margin set to 25px
Padding set to 25px
Padding & Margin set to 25px

Above visualization is built using below code.
<div style="margin:25px;  background:#ffff81; border:#000000 2px dashed;">
    Margin set to 25px
</div>
<div style="padding:25px; background:#ffff81; border:#000000 2px dashed;">
    Padding set to 25px
</div>
<div style="padding:25px; margin:25px; background:#ffff81; border:#000000 2px dashed;">
    Padding & Margin set to 25px
</div>

In the first <div>, space is set between the border and outside elements but in the second one it is between the border and text. Third one is a combination of both.

Hope this will help.

Comments

  1. This explication was so clear, thx for helping me understand the difference !

    ReplyDelete
  2. Excellent example and explanation.

    ReplyDelete
  3. Excellent answer!

    ReplyDelete
  4. Thks! very helpfull

    ReplyDelete
  5. thanks very helpful

    ReplyDelete
  6. Very useful tutorial, This tutorial has helped me a lot.
    Thank you for sharing this with us.

    ReplyDelete
  7. Really very helpful tutorial. Thank you for sharing such an informative and knowledgeable post with us.

    ReplyDelete
  8. Exactly what I was looking for. Many thanks!

    ReplyDelete
  9. very easy to understand and helpful thank you!

    ReplyDelete
  10. That was really the best explanation seen on the Internet

    ReplyDelete
  11. Thanks for your encouraging comments.

    ReplyDelete
  12. Thanx so much for your short but clear and easy-to-understand explanation. You rock!

    ReplyDelete
  13. Hey Thanks for this article

    ReplyDelete
  14. This is a good explanation of margin vs padding. Although, you should mention the various differences between the popular browsers and how they render them. There are some slight variations that will make you pull your hair out.

    ReplyDelete
  15. Hi Berkeley,

    I'll try to give info on these in another post. Thanks for the request.

    ReplyDelete
  16. yeah.. thks so much.. i am not familiar with html and css and everytime i need to do some simple text or image spacing without asking for help in forum, i am always confused and messed out on the padding and margins portion. but i still unable to space out two images in a wordpress sidebar. if i need two images align vertically between each other, i try to put in some value eg. 20px in both the padding and margins but there is no effect when i viewed them on the browser!!!
    i guess there is some overwriting of the css in other area of the theme css style sheet? any helpful advise on how to troubleshoot this? thanks for the tips here... i learn a lot..

    ReplyDelete
  17. Very good explanation!

    ReplyDelete
  18. Thank you very much for your crystal clear explanation.

    ReplyDelete
  19. Brilliant. So fresh and so clean.

    ReplyDelete
  20. Dont think all web savvys are aware of this!!!
    Thank you very much. Gives a clear idea. Rock On

    ReplyDelete
  21. It's a exhaustive tutorial...
    Thz.

    ReplyDelete
  22. Perfect.... simple and clear. That first image does it. Thanks.

    ReplyDelete
  23. very clear. Thanks a lot!

    ReplyDelete
  24. Thank you very much.

    ReplyDelete
  25. very clear. thanks.

    ReplyDelete
  26. Thanks machan,
    Hey I was with u in M2 in Ananda college,
    Exactly what I needed ,
    keep the good work

    ReplyDelete
  27. Really nice... Easy to understand.

    Thanks,

    ReplyDelete
  28. So simple yet so powerful! Just like the iPod!

    ReplyDelete
  29. Thanks, great explanation !!!!!

    ReplyDelete
  30. very clear, thanks!

    ReplyDelete
  31. Thanks for the nice information. I am sure, I will tweet this to my twitter account. This will help a lot of users.

    ReplyDelete
  32. Good Example. Thanks a lot Kamal...

    ReplyDelete
  33. OH! How come nobody else made it this simple?

    ReplyDelete
  34. Can one set the top, bottom, left and right padding or margins different?

    ReplyDelete
  35. This article is very helpful for understanding the difference between margin and padding. Thanks for posting this article.

    ReplyDelete
  36. Comment should not be empty

    ReplyDelete
  37. Thanks so much, Kamal! Very well explained.

    ReplyDelete
  38. Thank u for posting this tutorial in detailed,
    we wish to upload more like this....

    ReplyDelete
  39. thanks for the help

    ReplyDelete
  40. Thanks buddy..

    ReplyDelete
  41. This is very good article, I am very interested in its topic and read them was a pleasure.

    ReplyDelete
  42. I finally have the answer! Thank you. I always get confused when I use margin.

    ReplyDelete
  43. Very helpful, thanks!

    ReplyDelete
  44. Hey Dimuthu,
    Nice to hear that it helped.

    ReplyDelete
  45. Simple and clear, Merci !

    ReplyDelete
  46. Excellent example.

    ReplyDelete
  47. Great posting...Thanks for this helpful and useful post sharing here.

    ReplyDelete
  48. Your definition is very clear. Now I know the difference between the two. Thank you.

    ReplyDelete
  49. Solid explanation. Helped me realize and solve a design defect. Thanks!

    ReplyDelete
  50. Nice posts here, really looking forward to checking out your other posts whe I have got more time, I shall bookmark your blog now.

    ReplyDelete
  51. I noticed that it's hard to find your website in google, i found it on 22th spot, you should get some quality backlinks to rank it in google and increase traffic. I had the same problem with my website, your should search in google for - insane google ranking boost - it helped me a lot

    ReplyDelete
  52. @59 Thanks for the details and encouragement.
    As I detailed here, digizol dot org was my original domain, but someone bought it when I forgot to renew it; and currently it is put on sale by that owner. Because of that, all my back-links are no longer working, and the rankings has gone down. It'll take a long time to catch up I guess.

    ReplyDelete
  53. This comment has been removed by a blog administrator.

    ReplyDelete
  54. This comment has been removed by a blog administrator.

    ReplyDelete
  55. Good explanation and example. Thank you.

    ReplyDelete
  56. Good explanation with example.

    ReplyDelete
  57. Best explanation i found on this topic over internet

    ReplyDelete
  58. This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment

We appreciate your opinions, suggestions and criticism.

Popular posts from this blog

Web Services with Apache Axis 1.4 Tutorial: server and client sides

Java Sorting: Comparator vs Comparable Tutorial

Creative Commons License Digizol by Kamal Mettananda is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License .
URL of this page must be supplied in attribution
© 2004-2017