Java News Tips Software
Java News Tips Software | Contact | Facebook | Twitter RSS

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
(Look at the above diagram)

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

Look at this example for visual clarification generated with this code.
<div style="margin:25px; background:#cccccc; border:#000000 2px dashed;">
Text inside element
</div>
<div style="padding:25px; background:#cccccc; border:#000000 2px dashed;">
Text inside element
</div>


Text inside element

Text inside element



In the first <div>, space is set between the border and outside elements but in the second one it is between the boder and text.

Hope this will help.

Labels: ,


62 Comments

  1. Anonymous Anonymous on November 06, 2008 8:05 PM  
    This explication was so clear, thx for helping me understand the difference !
  2. THNKS
  3. Anonymous Anonymous on January 11, 2009 4:52 AM  
    Excellent example and explanation.
  4. Anonymous Anonymous on January 11, 2009 4:53 AM  
    Excellent answer!
  5. Anonymous Anonymous on January 11, 2009 6:08 AM  
    Thks! very helpfull
  6. Anonymous Anonymous on January 17, 2009 3:25 PM  
    thanks very helpful
  7. Thanks u r information
  8. Very useful tutorial, This tutorial has helped me a lot.
    Thank you for sharing this with us.
  9. Really very helpful tutorial. Thank you for sharing such an informative and knowledgeable post with us.
  10. Anonymous Anonymous on February 18, 2009 6:36 AM  
    Exactly what I was looking for. Many thanks!
  11. Anonymous Anonymous on April 05, 2009 7:33 AM  
    very easy to understand and helpful thank you!
  12. Anonymous Anonymous on April 07, 2009 12:10 PM  
    That was really the best explanation seen on the Internet
  13. Thanks for your encouraging comments.
  14. Anonymous Anonymous on April 22, 2009 8:44 AM  
    Thanx so much for your short but clear and easy-to-understand explanation. You rock!
  15. Anonymous Anonymous on April 30, 2009 4:14 AM  
    thanks
  16. Anonymous Ranjith on May 28, 2009 12:11 PM  
    Hey Thanks for this article
  17. 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.
  18. Hi Berkeley,

    I'll try to give info on these in another post. Thanks for the request.
  19. Anonymous Anonymous on August 26, 2009 1:35 AM  
    great post
  20. 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..
  21. Anonymous Anonymous on October 15, 2009 12:36 AM  
    Very good explanation!
  22. Thank you very much for your crystal clear explanation.
  23. Anonymous Anonymous on January 14, 2010 3:32 PM  
    Brilliant. So fresh and so clean.
  24. Dont think all web savvys are aware of this!!!
    Thank you very much. Gives a clear idea. Rock On
  25. Anonymous Anonymous on February 22, 2010 2:49 PM  
    It's a exhaustive tutorial...
    Thz.
  26. Anonymous Anonymous on March 13, 2010 1:07 AM  
    Perfect.... simple and clear. That first image does it. Thanks.
  27. Anonymous Anonymous on April 18, 2010 10:30 PM  
    very clear. Thanks a lot!
  28. Anonymous Anonymous on April 23, 2010 11:40 AM  
    Thank you very much.
  29. Anonymous Anonymous on June 04, 2010 6:30 PM  
    very clear. thanks.
  30. Anonymous Imantha Silva on June 07, 2010 8:28 PM  
    Thanks machan,
    Hey I was with u in M2 in Ananda college,
    Exactly what I needed ,
    keep the good work
  31. Really nice... Easy to understand.

    Thanks,
  32. Anonymous Anonymous on August 02, 2010 7:32 PM  
    So simple yet so powerful! Just like the iPod!
  33. Anonymous Anonymous on August 04, 2010 12:14 PM  
    Thanks, great explanation !!!!!
  34. Anonymous Anonymous on August 12, 2010 3:03 AM  
    very clear, thanks!
  35. Thanks for the nice information. I am sure, I will tweet this to my twitter account. This will help a lot of users.
  36. Good Example. Thanks a lot Kamal...
  37. Anonymous Anonymous on October 29, 2010 1:27 AM  
    Superb, Thanks
  38. Anonymous Anonymous on November 05, 2010 7:31 AM  
    OH! How come nobody else made it this simple?
  39. Can one set the top, bottom, left and right padding or margins different?
  40. Thanks for the help!
  41. This article is very helpful for understanding the difference between margin and padding. Thanks for posting this article.
  42. Anonymous Anonymous on March 31, 2011 10:10 AM  
    Comment should not be empty
  43. Anonymous Anonymous on April 04, 2011 11:07 PM  
    Thanks so much, Kamal! Very well explained.
  44. Thank u for posting this tutorial in detailed,
    we wish to upload more like this....
  45. Anonymous Anonymous on July 08, 2011 6:51 PM  
    thanks for the help
  46. Anonymous Anonymous on July 11, 2011 7:11 PM  
    Thanks buddy..
  47. This is very good article, I am very interested in its topic and read them was a pleasure.
  48. I finally have the answer! Thank you. I always get confused when I use margin.
  49. Anonymous Anonymous on December 10, 2011 2:50 AM  
    Very helpful, thanks!
  50. Thanks!!!
  51. Hey Dimuthu,
    Nice to hear that it helped.
  52. Anonymous Anonymous on January 12, 2012 7:19 PM  
    Simple and clear, Merci !
  53. Anonymous Anonymous on February 02, 2012 4:41 AM  
    Excellent example.
  54. Great posting...Thanks for this helpful and useful post sharing here.
  55. Now i know thank you
  56. Anonymous Samitha on July 10, 2012 10:19 AM  
    Your definition is very clear. Now I know the difference between the two. Thank you.
  57. Solid explanation. Helped me realize and solve a design defect. Thanks!
  58. Nice posts here, really looking forward to checking out your other posts whe I have got more time, I shall bookmark your blog now.
  59. Anonymous Anonymous on November 18, 2013 7:52 PM  
    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
  60. @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.
  61. Anonymous Anonymous on February 15, 2014 4:22 AM  
    This comment has been removed by a blog administrator.
  62. This comment has been removed by a blog administrator.
ABOUT AUTHOR
Page Views :
Email :
PREVIOUS ARTICLES
Select Month:
TOP
Free counter and web stats