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