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 and could anyone give me an example of where the differences lie and why it is important to know the difference?

Answer 1

In simple words, padding as a term is the space between the content and the border, whereas margin is the space outside the border. Here's an image I found from a quick Google search, that illustrates this idea in more detail.