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 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 :)