How to use margin vs padding in CSS?

The best I've seen explaining this with examples, diagrams, and even a 'try it yourself' view is here.

The diagram below I think gives an instant visual understanding of the difference.

enter image description here

One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3 supporting it.