Margin also affects the area of a box or inline element, but this time outside of the border (visible or not).
Effect: This will keep the element away from other elements. Margin does not affect the size of the border, but it does affect the space that the element takes up in the page.

This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.

This is the second div element.

If I want space around the elements I have two options: I can do it with padding:

This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.

This is the second div element.

But that will still keep the borders touching each other. If I don't want that, I will need margin:

This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.

This is the second div element.

Certainly I can also have padding and margin on the same elements, just as I can always use more than just one property!

This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.

This is the second div element.

Hint:

Never forget that padding and margin add to the space an element takes up! If you want to put two 50% wide elements next to each other, on a page, without getting a scrollbar or the elements breaking up into more than one line, that's fine, but if you add now padding or margin (or even border, that adds to the dimensions of the element too, the border is around the space the element takes up, too), then the elements are wider than 50% and won't fit without forcing a new line or scrollbars (depends).

Those two elements fit next to each other. The next two don't:

those two won't either:

and now, no padding, no margin, anywhere (but borders):