CSS is a strange beast, and typically the behaviour of margins can be a little strange to beginners. Over seven years old, this article from Andy Budd, No Margin for Error, is still a good read for the CSS newbie:
At it's core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one "collapses" to nothing.
