Diffrence between padding and margin

check out css-tricks for a thorough explanation of the box model.

The straightforward answer to your question is that the padding is on the inside of the border, while the margin is on the outside of the border. So if you want to increase the space between the content of an element (perhaps some text) and the elements border, then you would increase the padding. But if you wanted to increase the spacing between the element and other elements around it then you would increase the margin.

I made this jsfiddle to illustrate.

Margin is on the outside of block elements while padding is on the inside.

Use margin to separate the block from things outside it

Use padding to move the contents away from the edges of the block.

Taken from a quick Google Search: http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css

Margin is on the outside of an element and padding is on the inside.

Hey Yashwin,

There is a video about the CSS Box Model at http://teamtreehouse.com/library/css-foundations/the-box-model/the-css-box-model-concept-3 that explains it really well.

you should also look up (and always use) Box-sizing: Border-box; which makes your borders sit inside an element

Padding is the space between the content and the sides (like the borders) of an element whereas the margin is the space between the element and everything outside of the element. So basically, use margin to separate the your block element from things outside of it and use padding to move content away from the edges of the block element.

here are some solutions from stackoverflow:

http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding

Good luck!