margin is the space around elements (i.e. outside the border of an element).
padding is the space between the element border and the element content.
Visually, this helps:
The four numbers you may see after each of these start at the top and then go clock-wise. E.g. this:
margin:25px 50px 75px 100px;
means that the:
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
Note that the word “auto” is an instruction for the browser to calculate the margin.
The number of arguments to margin can vary from 1 to 4. Here’s what to do for the various cases:
One single value applies to all four sides.
Two values: apply first to top and bottom, the second to left and right.
Three values: apply first to top, second to left and right and third to bottom.
Four values apply to top, right, bottom and left in that order (clockwise).
More info here:
And this lets you actually try it out: