MDN has a pretty good intro to the box model.
This one should be self explanatory.
margin: 40px is next to a box with margin: 20px, the two boxes render 20 pixels apart. This is because margins don't add together - they dictate the minimum space
the element needs to be spaced from other stuff. MDN has more on this.