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.

Share this article please, on :

Share on fb Tweet Share on G+