CSS Padding Vs Margin CSS Margin Vs Padding

CSS Padding Vs Margin CSS Margin Vs Padding

 CSS Padding Vs  Margin /  CSS Margin Vs Padding / Difference between Css Margin And Padding

Many of us have confusion in our minds about when to use css margin and css padding. What is the difference between css padding and css margin? So are they the same? Also when to use padding and when to use margin?

Well the answer is a big NO. In fact they are exactly opposite. To solve this confusion we can think of padding as something which is inner to our element control and margin which is something outside the element control.

Padding

Padding is used when we it is required to create space between the border of the element control and the content within the control. Content within the control could be text or other child controls.  Mainly used to have some spacing towards area inner to control.

 Remember that when you use padding, padding adds to the containers width/height

Margin

On the other hand the margin is used to distance the borders of the element control from other controls external to it. It defines space between border and other outer elements.

 

The four sides of an element can also be set one by one using   margin-top, margin-bottom, margin-left, margin-right  and padding-top, padding-bottom, padding-right, padding-left are the self-explanatory properties you can use.

Below image can explain what it actually means

 

 

Try it yourself Click  HERE  

Hope this helps guys.. cheers :) 

 

 

 

Tags:

LCD Vs LED Vs (Edge Led) Televisions.html without using tables tableless html table less html css tableless layoutsCheckbox Check all GridviewJquery how to Change or add remove CSS.net String vs stringDiv scroll scrollbar div div with scrollbar scrollbar in divC# ref Vs outDateTime.Today Vs DateTime.NowHttp Vs. Httpsdelete vs truncateServerTransfer vs ResponseRedirect

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.