
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: Tech, Web Design
Search Related Articles
Do you like this post?
-
This explication was so clear, thx for helping me understand the difference !
-
THNKS
-
Excellent example and explanation.
-
Excellent answer!
-
Thks! very helpfull
-
thanks very helpful
-
web design company,web designer,web design India,website design,web design (January 22, 2009 4:30 PM)Thanks u r information
-
Very useful tutorial, This tutorial has helped me a lot.
Thank you for sharing this with us. -
Really very helpful tutorial. Thank you for sharing such an informative and knowledgeable post with us.
-
Exactly what I was looking for. Many thanks!
-
very easy to understand and helpful thank you!
-
That was really the best explanation seen on the Internet
-
Thanks for your encouraging comments.
-
Thanx so much for your short but clear and easy-to-understand explanation. You rock!
-
thanks
-
Hey Thanks for this article
-
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.
-
Hi Berkeley,
I'll try to give info on these in another post. Thanks for the request. -
great post
-
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.. -
Very good explanation!
-
Thank you very much for your crystal clear explanation.

Print it

Kamal Mettananada is a Software Architect, Java Explorer and Blogger. Digizol consists of computer related articles, tutorials, tips and other information.
Post a Comment
We appreciate your opinions, suggestions and criticism.