
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
Translate into your language
Reader Comments
Search More Articles

Kamal Mettananada is a Software Architect, Java Explorer and Blogger. Digizol consists of computer related articles, tutorials, tips and other information.
Thank you for sharing this with us.
I'll try to give info on these in another post. Thanks for the request.
Post a Comment
We appreciate your opinions, suggestions and criticism.