Margin Vs Padding - CSS Properties @Digizol

Article By Kamal Mettananda on December 21, 2006

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

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: Tech, Web Design

58 Comments for "Margin Vs Padding - CSS Properties"

Anonymous on November 06, 2008 8:05 PM

This explication was so clear, thx for helping me understand the difference !
Anonymous on December 26, 2008 10:19 PM

THNKS
Anonymous on January 11, 2009 4:52 AM

Excellent example and explanation.
Anonymous on January 11, 2009 4:53 AM

Excellent answer!
Anonymous on January 11, 2009 6:08 AM

Thks! very helpfull
Anonymous on January 17, 2009 3:25 PM

thanks very helpful
web design company,web designer,web design India,website design,web design on January 22, 2009 4:30 PM

Thanks u r information
suparna on February 15, 2009 11:07 AM

Very useful tutorial, This tutorial has helped me a lot.
Thank you for sharing this with us.
Web Designer on February 15, 2009 11:10 AM

Really very helpful tutorial. Thank you for sharing such an informative and knowledgeable post with us.
Anonymous on February 18, 2009 6:36 AM

Exactly what I was looking for. Many thanks!
Anonymous on April 05, 2009 7:33 AM

very easy to understand and helpful thank you!
Anonymous on April 07, 2009 12:10 PM

That was really the best explanation seen on the Internet
Kamal Mettananda on April 07, 2009 12:37 PM

Thanks for your encouraging comments.
Anonymous on April 22, 2009 8:44 AM

Thanx so much for your short but clear and easy-to-understand explanation. You rock!
Anonymous on April 30, 2009 4:14 AM

thanks
Ranjith on May 28, 2009 12:11 PM

Hey Thanks for this article
Berkeley on July 03, 2009 6:06 AM

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.
Kamal Mettananda on July 03, 2009 8:25 AM

Hi Berkeley,

I'll try to give info on these in another post. Thanks for the request.
Anonymous on August 26, 2009 1:35 AM

great post
alphaboy on September 27, 2009 9:55 AM

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..
Anonymous on October 15, 2009 12:36 AM

Very good explanation!
Anonymous on November 15, 2009 12:53 PM

Thank you very much for your crystal clear explanation.
Anonymous on January 14, 2010 3:32 PM

Brilliant. So fresh and so clean.
Anonymous on February 07, 2010 12:55 PM

Dont think all web savvys are aware of this!!!
Thank you very much. Gives a clear idea. Rock On
Anonymous on February 22, 2010 2:49 PM

It's a exhaustive tutorial...
Thz.
Anonymous on March 13, 2010 1:07 AM

Perfect.... simple and clear. That first image does it. Thanks.
Anonymous on April 18, 2010 10:30 PM

very clear. Thanks a lot!
Anonymous on April 23, 2010 11:40 AM

Thank you very much.
Anonymous on June 04, 2010 6:30 PM

very clear. thanks.
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
Php Mysql on June 19, 2010 5:02 PM

Really nice... Easy to understand.

Thanks,
Anonymous on August 02, 2010 7:32 PM

So simple yet so powerful! Just like the iPod!
Anonymous on August 04, 2010 12:14 PM

Thanks, great explanation !!!!!
Anonymous on August 12, 2010 3:03 AM

very clear, thanks!
iPad Application Development on September 23, 2010 5:38 PM

Thanks for the nice information. I am sure, I will tweet this to my twitter account. This will help a lot of users.
Naresh on October 15, 2010 4:11 PM

Good Example. Thanks a lot Kamal...
Anonymous on October 29, 2010 1:27 AM

Superb, Thanks
Anonymous on November 05, 2010 7:31 AM

OH! How come nobody else made it this simple?
Anonymous on November 22, 2010 10:47 AM

Can one set the top, bottom, left and right padding or margins different?
Mayank on November 29, 2010 8:56 AM

Thanks for the help!
Mayank on December 16, 2010 10:31 AM

This article is very helpful for understanding the difference between margin and padding. Thanks for posting this article.
Anonymous on March 31, 2011 10:10 AM

Comment should not be empty
Anonymous on April 04, 2011 11:07 PM

Thanks so much, Kamal! Very well explained.
web designing on May 09, 2011 10:49 AM

Thank u for posting this tutorial in detailed,
we wish to upload more like this....
Anonymous on July 08, 2011 6:51 PM

thanks for the help
Anonymous on July 11, 2011 7:11 PM

Thanks buddy..
Custom Logo Design on September 22, 2011 12:19 PM

This is very good article, I am very interested in its topic and read them was a pleasure.
GPS Reviews on October 06, 2011 9:14 AM

I finally have the answer! Thank you. I always get confused when I use margin.
Anonymous on December 10, 2011 2:50 AM

Very helpful, thanks!
muthulee on December 13, 2011 9:46 AM

Thanks!!!
Kamal Mettananda on December 13, 2011 10:42 AM

Hey Dimuthu,
Nice to hear that it helped.
Anonymous on January 12, 2012 7:19 PM

Simple and clear, Merci !
Anonymous on February 02, 2012 4:41 AM

Excellent example.
Conversion Rate Optimization Experts on February 22, 2012 4:21 PM

Great posting...Thanks for this helpful and useful post sharing here.
Eli on May 03, 2012 2:42 PM

Now i know thank you
Samitha on July 10, 2012 10:19 AM

Your definition is very clear. Now I know the difference between the two. Thank you.
Eric Van Geem on August 10, 2012 1:21 AM

Solid explanation. Helped me realize and solve a design defect. Thanks!
Web development Company on April 27, 2013 12:50 PM

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

Search for what you like

Be Nice to Share...

@Digizol

Margin Vs Padding - CSS Properties

58 Comments for "Margin Vs Padding - CSS Properties"

Post a Comment

Search for what you like

Be Nice to Share...