Difference between margin and padding?

Question

What exactly is the difference between margin and padding in CSS? It really doesn't seem to serve much purpose. Could you give me an example of where the differences lie (and why it is important to know the difference)?

Answer 1

Padding is the space between nearest components on the web page and margin is the space from the margin of the webpage.

Answer 2

Margin is applied to the outside of you element hence effecting how far your element is away from other elements.

Padding is applied to the inside of your element hence effecting how far your element's content is away from the border.

Also, using margin will not affect your element's dimensions whereas padding will make your elements dimensions (set height + padding) so for example if you have a 100x100px div with a 5 px padding, your div will actually be 105x105px

Answer 3

Margin is space outside the box; padding is space inside the box. It's hard to see the difference with a white fill, but with a colored fill you can see it fine.

Answer 4

margin = space around (outside) the element from border outwards.

padding = space around (inside) the element from text to border.

see here: http://jsfiddle.net/robx/GaMpq/

Answer 5

Padding is the space between you content and the border. Where as Margin is the space between the border and the other element.

Answer 6

Basically, the difference between padding and margin come in terms of the background. Padding will decide the space between content, while margin decide the outside edge of elements!