What is the point of CSS collapsing margins?

The CSS2 box model tells us that adjoining vertical margins collapse.

I find it quite annoying, being the source of many design bugs. I hope that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when they are not needed.

What is the purpose of this feature?