CSS - Margin VS Padding in hindi / kya h / kese lagaye technamdev.blogspot.com

CSS - Margin VS Padding

CSS Box Model in Hindi

• Element Content : element का content होता है | For Example, some text, images
• Padding : Padding ये border के अन्दर का हिस्सा होता है और ये element का हिस्सा होता है |
• Border : Border ये padding और margin के बीच का हिस्सा होता है |
• Margin : Margin ये border के बाहर का हिस्सा होता है और ये element का हिस्सा नहीं होता है |

Example

Example पर border की बाहरी space ये margin होती है | border की अन्दर की space ये padding होती है |

<style>
p{
padding : 100px;
margin : 100px;
border : 5px #F00 solid;
}
</style>
<p>CSS stands for Cascading Style Sheet</p> 

CSS stands for Cascading Style Sheet

Live Example

Understand the Example given about Margin and Padding

<p style="margin:50px;background-color:yellow;">
margin:50px;
</p>
<p style="padding:50px;background-color:yellow;">
padding:50px;
</p>

margin:50px;

padding:50px;

Margin	Padding
Margin ये एक element से दूसरे element तक दूरी बनाये रखता है |	Padding ये अपने element के content से दूरी बनाये रखता है |
Margin ये element का हिस्सा नहीं होता है |	Padding ये element का हिस्सा नहीं होता है |
Margin ये element के बाहर होता है |	Padding ये element के अन्दर होता है |

Box-Model in CSS

CSS में Margins, Border और Paddings की length अलग -अलग होती है |

For Example,

<p style="width:300px;border:5px #000 solid;">
Total Width = width 300px + left border 5px + right border 5px = 310px
</p>
<p style="width:308px;border:1px #F00 solid;">
Total Width = width 308px + left border 1px + right border 1px = 310px
</p> 
<p style="width:250px;border:30px #F00 solid;">
Total Width = 250px + left border 30px + right border 30px = 310px
</p> 
<p style="width:250px;padding:20px;border:10px #F00 solid;">
Total Width = 250px  + left padding 20px + right padding 20px + left border 10px + right border 10px = 310px
</p>
<p style="width:250px;margin:20px;border:10px #F00 solid;">
Total Width = 250px  + left margin 20px + right margin 20px + left border 10px + right border 10px = 310px
<strong>Note : Margin is outside the border.</strong>
</p>